From a036c89291a5dc526297a6ca44b050bf739a59db Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 21:25:46 +0000
Subject: [PATCH] Fix Product Spotlight looking too wide on tablet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/components/ProductSpotlight.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/components/ProductSpotlight.tsx b/app/components/ProductSpotlight.tsx
index 41acf8a..d77965b 100644
--- a/app/components/ProductSpotlight.tsx
+++ b/app/components/ProductSpotlight.tsx
@@ -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 ? (