From 340dcd2c942f35c1a79bcbacef217d295155bd5c Mon Sep 17 00:00:00 2001 From: Marco Date: Sun, 2 Aug 2026 07:23:34 +0000 Subject: [PATCH] Fix notify-form input height to actually match the cart button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit py-3 alone didn't match AddToCartInlineButton's real height — that button's tallest child is its 1.875rem cart-icon image, not its text, so an input with the same padding but only text content still rendered shorter. Explicit h-14 matches the button's actual 56px. Co-Authored-By: Claude Sonnet 5 --- app/components/NotifyMeForm.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/app/components/NotifyMeForm.tsx b/app/components/NotifyMeForm.tsx index 78ef7d2..eae937c 100644 --- a/app/components/NotifyMeForm.tsx +++ b/app/components/NotifyMeForm.tsx @@ -19,10 +19,12 @@ import { ArrowRightIcon } from "./ArrowRightIcon"; * stacked version's own padding was tried and reverted — the actual ask * was to keep every control's height untouched and make the CARD match * instead. Embedding the submit icon inside the input keeps this whole - * control to exactly one row, sized with the same `py-3` as - * AddToCartInlineButton's own "In den Warenkorb" button, so a sold-out - * card ends up exactly as tall as an in-stock one — see that component's - * own button classes. + * control to exactly one row, given an explicit h-14 (3.5rem/56px) to + * match AddToCartInlineButton's own "In den Warenkorb" button's actual + * rendered height — that button isn't 56px from its py-3 padding alone, + * its 1.875rem cart-icon image is the tallest thing in it, so matching + * padding here wouldn't have matched height; a sold-out card now ends up + * exactly as tall as an in-stock one. */ export function NotifyMeForm({ productId, variantName = "" }: { productId: number; variantName?: string }) { const [email, setEmail] = useState(""); @@ -69,7 +71,14 @@ export function NotifyMeForm({ productId, variantName = "" }: { productId: numbe onChange={(e) => setEmail(e.target.value)} 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" + // h-14 (3.5rem/56px), not py-3 alone — AddToCartInlineButton's + // own button isn't 56px tall because of its py-3 padding alone, + // it's that plus its 1.875rem/30px cart-icon image, which is + // taller than this input's own text line-height would be at + // that same padding. Setting the height explicitly (rather than + // trying to reverse-engineer a padding value that happens to + // produce 56px for text-body-sm) is what actually matches it. + className="w-full h-14 rounded-sm border border-border pl-3 pr-12 text-body-sm text-text-primary bg-bg-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand" />