Fix shop/related/wishlist grids not equalizing card heights

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
This commit is contained in:
Marco
2026-08-26 23:34:25 +00:00
parent e882b8b6ac
commit 0791e7c8bc
3 changed files with 13 additions and 3 deletions
+3 -1
View File
@@ -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}