fix: "Passwort vergessen" schob sich ueber das CAPTCHA
Docker Image bauen und veroeffentlichen / build-and-push (push) Successful in 2m41s

Im Anmeldeformular standen CAPTCHA, Absenden-Knopf und der
"Passwort vergessen"-Link in EINER Flex-Zeile ohne Umbruch:

    <div className="flex items-center justify-between gap-4">

Das Turnstile-Widget ist ein iframe mit FESTER Breite von rund 300 px und
schrumpft nicht mit. Die Zeile steht zudem in einer der beiden Spalten
der Kontoseite, hat also nur die halbe Breite zur Verfuegung. Der Platz
reichte daher nie — die Elemente schoben sich uebereinander, und zwar
nicht nur auf schmalen Bildschirmen.

Jetzt steht das Widget auf einer eigenen Zeile, Knopf und Link darunter
in einer Zeile mit "flex-wrap". Das Registrierungsformular daneben hat es
schon immer so gemacht; die beiden sind damit endlich gleich aufgebaut.

Damit das an keiner Stelle wiederkommen kann, traegt das Widget selbst
jetzt "w-fit max-w-full overflow-x-auto". Das ist kein Schoenheitsmittel,
sondern eine Zusicherung: der iframe bleibt in jedem Fall innerhalb
seines Kastens. Ist der zu schmal, laesst sich der Inhalt seitlich
schieben, statt das Layout zu zerlegen — unabhaengig davon, wie eine
kuenftige Seite ihn einbettet.

Die uebrigen sieben Einbindungen (Registrierung, Passwort vergessen,
Passwort zuruecksetzen, Zwei-Faktor-Code, Produktseite, Firmenanfrage,
Newsletter, Checkout) habe ich geprueft: dort steht das Widget bereits
auf einer eigenen Zeile.

tsc: 0 Fehler. vitest: 359/359 gruen. eslint: 0 Warnungen.
"next build" laeuft durch.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
Nick SzaunigandClaude Opus 5 committed 2026-09-20 02:52:15 +02:00
1 parent 7f9ed7262f
commit bffcce127d
2 files changed
+21 -5

No files matched your search

+11 -4
View File
@@ -47,10 +47,17 @@ export default async function KontoPage(props: PageProps<"/konto">) {
<h2 className="text-lg text-forest">{t.account.login}</h2>
<Field name="email" label={t.account.emailLabel} type="email" required autoComplete="email" />
<PasswordField name="password" label={t.account.passwordLabel} required autoComplete="current-password" />
<div className="flex items-center justify-between gap-4">
{process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ? (
<TurnstileField siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY} />
) : null}
{/* Das Turnstile-Widget ist ein iframe mit FESTER Breite (rund
300 px) und kann nicht mitschrumpfen. In einer Zeile mit
Knopf und Link — noch dazu in einer der beiden Spalten
dieser Seite — reichte der Platz nie: die Elemente schoben
sich uebereinander. Deshalb steht es auf einer eigenen
Zeile, und Knopf und Link duerfen darunter umbrechen. Das
Registrierungsformular daneben macht es schon immer so. */}
{process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ? (
<TurnstileField siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY} />
) : null}
<div className="flex flex-wrap items-center gap-x-4 gap-y-2">
<Button type="submit">{t.account.login}</Button>
<Link href="/konto/passwort-vergessen" className="text-xs text-ink/65 hover:text-forest underline">
{t.account.forgotPassword}