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:
@@ -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}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user