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

@@ -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>
   );