From 70bc839f48607b4b22cce3db3af932814bc8e2ac Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sun, 2 Aug 2026 07:17:14 +0000
Subject: [PATCH] Restore reserved low-stock line, clearer notify-me
 placeholder text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

NotifyMeForm's single-row redesign matched AddToCartInlineButton's
button height exactly, which made the sold-out card's earlier
low-stock-line omission overcorrect — it ended up shorter than its
siblings instead of taller. Keeping that line unconditional (like every
other card) is what actually lines them up. Also swapped the generic
"E-Mail-Adresse" placeholder for one that states the purpose.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/components/NotifyMeForm.tsx |  4 ++--
 app/components/ProductCard.tsx  | 23 +++++++++++------------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/app/components/NotifyMeForm.tsx b/app/components/NotifyMeForm.tsx
index 8bcbad7..78ef7d2 100644
--- a/app/components/NotifyMeForm.tsx
+++ b/app/components/NotifyMeForm.tsx
@@ -67,8 +67,8 @@ export function NotifyMeForm({ productId, variantName = "" }: { productId: numbe
           type="email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
-          placeholder="E-Mail-Adresse"
-          aria-label="E-Mail-Adresse für Verfügbarkeits-Info"
+          placeholder="Bei Verfügbarkeit benachrichtigen"
+          aria-label="E-Mail-Adresse für Benachrichtigung, sobald das Produkt wieder verfügbar ist"
           className="w-full rounded-sm border border-border pl-3 pr-12 py-3 text-body-sm text-text-primary bg-bg-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand"
         />
         <button
diff --git a/app/components/ProductCard.tsx b/app/components/ProductCard.tsx
index 48280b7..466323d 100644
--- a/app/components/ProductCard.tsx
+++ b/app/components/ProductCard.tsx
@@ -108,18 +108,17 @@ export function ProductCard({
           {!kleinunternehmer && <span className="text-label text-text-muted">inkl. {taxRate}% MwSt.</span>}
         </p>
         {belowPrice}
-        {/* Reserved height keeps every IN-STOCK card in a row equal height
-            regardless of low-stock status — but a fully-out-of-stock
-            product can never show this line (anyLowStock is meaningless
-            once nothing's left to sell), so it's omitted entirely rather
-            than reserving dead space here. That dead space was exactly
-            what made a sold-out card's NotifyMeForm sit lower than
-            necessary, growing the whole card taller than its in-stock
-            siblings — see NotifyMeForm.tsx's own comment on that height
-            mismatch. */}
-        {!fullyOutOfStock && (
-          <p className="min-h-[1.05rem] text-label font-bold text-warning">{anyLowStock ? "Nur noch wenige verfügbar" : null}</p>
-        )}
+        {/* Always rendered, text conditional — reserved height keeps every
+            card in a row equal height regardless of low-stock status. An
+            earlier version omitted this for fully-out-of-stock products
+            (this line can never apply there), on the theory that it was
+            dead space — but NotifyMeForm's single-row redesign (see its
+            own comment) now matches AddToCartInlineButton's button height
+            exactly, which made THIS line the only remaining source of a
+            mismatch: omitting it made the sold-out card shorter than its
+            siblings instead of taller. Keeping it unconditional is what
+            actually gets an exact match now. */}
+        <p className="min-h-[1.05rem] text-label font-bold text-warning">{anyLowStock ? "Nur noch wenige verfügbar" : null}</p>
 
         {/* flex-1 spacer — pins every card's button to the same Y
             regardless of whether the title/category line wraps. */}