From bffcce127dc696abed81fcdbdf0735c5b334bbc4 Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Sun, 20 Sep 2026 02:52:15 +0200
Subject: [PATCH] fix: "Passwort vergessen" schob sich ueber das CAPTCHA
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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) <noreply@anthropic.com>
---
 src/app/konto/page.tsx              | 15 +++++++++++----
 src/components/turnstile-widget.tsx | 11 ++++++++++-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/app/konto/page.tsx b/src/app/konto/page.tsx
index 2ebe390..a9ed453 100644
--- a/src/app/konto/page.tsx
+++ b/src/app/konto/page.tsx
@@ -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}
diff --git a/src/components/turnstile-widget.tsx b/src/components/turnstile-widget.tsx
index d2ccd1d..e3ff055 100644
--- a/src/components/turnstile-widget.tsx
+++ b/src/components/turnstile-widget.tsx
@@ -166,8 +166,17 @@ export function TurnstileWidget({ siteKey, onVerify }: TurnstileWidgetProps) {
     };
   }, [siteKey, attempt]);
 
+  // "max-w-full overflow-x-auto" ist kein Schoenheitsmittel, sondern eine
+  // Zusicherung: Cloudflare liefert einen iframe mit FESTER Breite (rund
+  // 300 px), der nicht mitschrumpft. Steht er in einem schmaleren Kasten,
+  // ragt er heraus und schiebt sich ueber das, was daneben liegt — auf der
+  // Kontoseite traf das den "Passwort vergessen"-Link. Mit diesen Klassen
+  // bleibt er in jedem Fall innerhalb seines Kastens; ist der zu schmal,
+  // laesst sich der Inhalt seitlich schieben, statt das Layout zu zerlegen.
+  // "w-fit" verhindert zugleich, dass der Kasten in einer Flex-Zeile mehr
+  // Platz beansprucht als der iframe braucht.
   return (
-    <div>
+    <div className="w-fit max-w-full overflow-x-auto">
       <div ref={containerRef} />
       {failed ? (
         <p className="text-sm text-red-700">