From 0791e7c8bc1bf9dd79111e93b5ecb294d17d30ba Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 26 Aug 2026 23:34:25 +0000
Subject: [PATCH] Fix shop/related/wishlist grids not equalizing card heights
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ProductCard already has a h-full + flex-1 spacer specifically to keep
every card in a row the same height regardless of content (title wrap,
subline wrap, low-stock line) — but all three grids using it set
items-start on the grid container, which overrides the default stretch
and silently defeats that. A product whose subline wraps to 2 lines made
its card taller than its row siblings instead of them matching. Dropping
items-start (default items-stretch) fixes all three call sites.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01J1Hu5bZ1kZUgKhab6yNwCt
---
 app/cart/components/RelatedProducts.tsx          | 4 +++-
 app/konto/merkliste/components/MerklisteGrid.tsx | 4 +++-
 app/shop/components/ProductGrid.tsx              | 8 +++++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/cart/components/RelatedProducts.tsx b/app/cart/components/RelatedProducts.tsx
index 5811ac5..0ad199c 100644
--- a/app/cart/components/RelatedProducts.tsx
+++ b/app/cart/components/RelatedProducts.tsx
@@ -129,7 +129,9 @@ export function RelatedProducts({
           (opacity: 0) — invisible. Not worth chasing a fix for a
           scroll-reveal nicety on a list that mutates; a static grid
           renders correctly with no animation risk. */}
-      <div className="grid items-start grid-cols-1 sm:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] w-full max-w-[75rem]">
+      {/* No items-start — see ProductGrid.tsx's own comment on why that
+          silently defeats ProductCard's h-full equal-height design. */}
+      <div className="grid grid-cols-1 sm:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] w-full max-w-[75rem]">
         {displayProducts.map((product, i) => (
           <ProductCard
             key={product.id}
diff --git a/app/konto/merkliste/components/MerklisteGrid.tsx b/app/konto/merkliste/components/MerklisteGrid.tsx
index 9651be6..31a8428 100644
--- a/app/konto/merkliste/components/MerklisteGrid.tsx
+++ b/app/konto/merkliste/components/MerklisteGrid.tsx
@@ -39,7 +39,9 @@ export function MerklisteGrid({
   }
 
   return (
-    <RevealGroup className="grid items-start grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
+    // No items-start — see ProductGrid.tsx's own comment on why that
+    // silently defeats ProductCard's h-full equal-height design.
+    <RevealGroup className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
       {visibleEntries.map(({ item, product }) => (
         <RevealItem key={`${product.id}-${item.variant}`}>
           <ProductCard
diff --git a/app/shop/components/ProductGrid.tsx b/app/shop/components/ProductGrid.tsx
index 43303f6..47b1030 100644
--- a/app/shop/components/ProductGrid.tsx
+++ b/app/shop/components/ProductGrid.tsx
@@ -114,9 +114,15 @@ export async function ProductGrid({
               RevealItems mounted into an already-settled parent and stayed
               stuck at opacity 0 — the grid going blank/white after
               applying a filter. */}
+          {/* No items-start here (was set before, silently defeating
+              ProductCard's own h-full + flex-1 spacer, built exactly for
+              equal-height cards) — default items-stretch is what actually
+              makes every card in a row match the tallest one, e.g. when
+              one product's subline wraps to 2 lines and its neighbors'
+              don't. */}
           <RevealGroup
             key={products.map((p) => p.id).join(",")}
-            className="grid items-start grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] w-full"
+            className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] w-full"
           >
             {products.map((product) => (
               <RevealItem key={product.id} className="lg:col-span-4">