From 8f006b66037b2ce229b1e511baf2bd9e5da643ec Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 26 Aug 2026 23:37:58 +0000
Subject: [PATCH] Keep product card prices aligned regardless of subline/name
 length
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous equal-height fix (items-stretch) made cards match overall
height, but a subline wrapping to 2 lines still pushed that card's own
price row down relative to its row siblings — the flex-1 spacer only
re-aligns the button at the bottom, not the price above it. Name now
clamps to 1 line, subline always reserves a clamped 2-line slot
(rendered even when empty) — every card's price row starts at the same Y
regardless of title length or whether a subline is set at all.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01J1Hu5bZ1kZUgKhab6yNwCt
---
 app/components/ProductCard.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/components/ProductCard.tsx b/app/components/ProductCard.tsx
index 5eb98ea..c75a98c 100644
--- a/app/components/ProductCard.tsx
+++ b/app/components/ProductCard.tsx
@@ -103,20 +103,25 @@ export function ProductCard({
           {product.categories.length > 0 && (
             <p className="text-label font-semibold text-text-muted uppercase tracking-wide">{product.categories.join(", ")}</p>
           )}
+          {/* line-clamp-1 on the name and a reserved+clamped 2-line slot
+              for the subline — without these, a longer name or a subline
+              that wraps to 2 lines pushes THAT card's price row down
+              relative to its row siblings; the flex-1 spacer near the
+              button only re-aligns the button, not the price above it. */}
           {product.href ? (
             <Link
               href={product.href}
-              className="font-semibold text-h4 text-text-primary w-full hover:text-brand transition-colors"
+              className="font-semibold text-h4 text-text-primary w-full line-clamp-1 hover:text-brand transition-colors"
               style={{ fontFamily: "var(--font-lora)" }}
             >
               <ProductName name={product.name} />
             </Link>
           ) : (
-            <p className="font-semibold text-h4 text-text-primary w-full" style={{ fontFamily: "var(--font-lora)" }}>
+            <p className="font-semibold text-h4 text-text-primary w-full line-clamp-1" style={{ fontFamily: "var(--font-lora)" }}>
               <ProductName name={product.name} />
             </p>
           )}
-          {product.subline && <p className="text-body-sm text-text-muted">{product.subline}</p>}
+          <p className="text-body-sm text-text-muted w-full line-clamp-2 min-h-[2.75rem]">{product.subline}</p>
         </div>
         <p className="flex items-baseline gap-1.5">
           {discount !== null && (