Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shop overview: 2 products per row through tablet, 4 only from lg

Browse Source 
Was 4-up from sm (640px) — too narrow a card through the 640-1023px
tablet range. True mobile (below sm) unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-07-30 21:36:57 +00:00
parent ea7f4a4b3b
commit 6b8ba44d46
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/shop/components/ProductGrid.tsx
+7 -3
View File
@@ -31,7 +31,11 @@ export async function ProductGrid() {
return (
<section className="w-full bg-bg-base flex flex-col pb-16 md:pb-20 px-[var(--layout-padding-x)]">
<RevealGroup className="grid grid-cols-1 sm:grid-cols-12 gap-6 sm:gap-[var(--layout-grid-gap)] w-full">
{/* 2-up from the mobile breakpoint (sm, 640px) through 1023px — was
sm:grid-cols-12 with each card sm:col-span-3 (4-up), too narrow a
card through that tablet range. 4-up now only kicks in at lg
(1024px), true mobile (below sm) unchanged. */}
<RevealGroup 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) => {
const discount = discountPercent(product.price, product.compareAtPrice);
const taxRate = effectiveTaxRate(product, defaultTaxRate);
@@ -48,14 +52,14 @@ export async function ProductGrid() {
return (
<RevealItem
key={product.id}
className="group sm:col-span-3 bg-bg-base border border-border rounded-md overflow-hidden flex flex-col h-full transition-transform duration-300 hover:-translate-y-1"
className="group lg:col-span-3 bg-bg-base border border-border rounded-md overflow-hidden flex flex-col h-full transition-transform duration-300 hover:-translate-y-1"
>
<div className="relative w-full aspect-[276/210] overflow-hidden">
<Image
src={product.image}
alt={product.name}
fill
sizes="(min-width: 640px) 25vw, 100vw"
sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw"
className={`object-cover transition-transform duration-500 group-hover:scale-105 ${fullyOutOfStock ? "opacity-60" : ""}`}
/>
{fullyOutOfStock ? (