From 2638515683333251da574d0d135e959a15b88c52 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sat, 1 Aug 2026 19:52:37 +0000
Subject: [PATCH] Fix NotifyMeForm layout: stack input/button instead of
 side-by-side

Narrow product cards (shop grid, related products) truncated the
email placeholder when input and button shared a row.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/components/NotifyMeForm.tsx | 35 +++++++++++++++++----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/app/components/NotifyMeForm.tsx b/app/components/NotifyMeForm.tsx
index d0db649..16b8f21 100644
--- a/app/components/NotifyMeForm.tsx
+++ b/app/components/NotifyMeForm.tsx
@@ -49,24 +49,25 @@ export function NotifyMeForm({ productId, variantName = "" }: { productId: numbe
   }
 
   return (
+    // Stacked, not side-by-side — narrow product cards (shop grid, related
+    // products) don't leave enough width for input + button in one row
+    // without either truncating the placeholder or squeezing the button.
     <form onSubmit={handleSubmit} className="flex flex-col gap-2 w-full">
-      <div className="flex gap-2">
-        <input
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          placeholder="E-Mail für Verfügbarkeits-Info"
-          aria-label="E-Mail für Verfügbarkeits-Info"
-          className="flex-1 min-w-0 rounded-sm border border-border px-3 py-2 text-body-sm text-text-primary bg-bg-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand"
-        />
-        <button
-          type="submit"
-          disabled={status === "submitting"}
-          className="shrink-0 rounded-sm border border-border px-4 py-2 text-body-sm font-semibold text-text-primary hover:border-brand transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
-        >
-          {status === "submitting" ? "…" : "Benachrichtigen"}
-        </button>
-      </div>
+      <input
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="E-Mail-Adresse"
+        aria-label="E-Mail-Adresse für Verfügbarkeits-Info"
+        className="w-full rounded-sm border border-border px-3 py-2 text-body-sm text-text-primary bg-bg-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand"
+      />
+      <button
+        type="submit"
+        disabled={status === "submitting"}
+        className="w-full rounded-sm border border-border px-4 py-2 text-body-sm font-semibold text-text-primary hover:border-brand transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
+      >
+        {status === "submitting" ? "…" : "Bei Verfügbarkeit benachrichtigen"}
+      </button>
       {error && <p className="text-label text-red-600">{error}</p>}
     </form>
   );