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" />