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

Fix Product Spotlight looking too wide on tablet

Browse Source 
sm:flex-row (640px) put the 380px image side-by-side with text well
before there was comfortable room for it — tablet widths (768-1023px)
read as cramped. Now stays stacked like mobile through lg (1024px),
with a max-w-[32rem] cap between sm and lg so the stacked card reads
as centered/narrower instead of stretching to fill the tablet
viewport (true mobile stays unconstrained, the viewport is already
narrow there).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-07-30 21:25:46 +00:00
parent 32f4068272
commit a036c89291
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/ProductSpotlight.tsx
+11 -3
View File
@@ -43,13 +43,21 @@ export async function ProductSpotlight() {
// section instead of navigating to /shop whenever exactly 1 product is
// active (see Navbar.tsx/layout.tsx).
<section id="spotlight" className="w-full bg-bg-base py-12 sm:py-16 px-[var(--layout-padding-x)]">
<Reveal className="max-w-[75rem] mx-auto rounded-md flex flex-col sm:flex-row gap-8 sm:gap-12 items-center p-6 sm:p-10">
<div className="group relative w-full sm:w-[23.75rem] sm:shrink-0 aspect-[410/227] rounded-sm overflow-hidden">
{/* Row layout only from lg (1024px) up — sm:flex-row used to kick in
at 640px, but a 380px-wide image + text squeezed into the rest of
a tablet-width viewport (768-1023px) read as cramped/too wide.
Tablet now stays stacked like mobile, but max-w-[32rem] between sm
and lg keeps that stacked card centered and narrower than the
tablet viewport instead of stretching to fill it — true mobile
(below sm) stays unconstrained since the viewport itself is
already narrow there. */}
<Reveal className="max-w-[75rem] sm:max-w-[32rem] lg:max-w-[75rem] mx-auto rounded-md flex flex-col lg:flex-row gap-8 lg:gap-12 items-center p-6 sm:p-10">
<div className="group relative w-full lg:w-[23.75rem] lg:shrink-0 aspect-[410/227] rounded-sm overflow-hidden">
<Image
src={image}
alt={product.name}
fill
sizes="(min-width: 640px) 380px, 100vw"
sizes="(min-width: 1024px) 380px, (min-width: 640px) 512px, 100vw"
className="object-cover transition-transform duration-500 group-hover:scale-105"
/>
{fullyOutOfStock ? (