fix(mobile): products grid pushed off-screen below the 2x2 hero editor on narrow viewports

6224e998d363a884ea2cbcfcb3071062fda24533 · 2026-05-14 08:58:03 -0700 · SteveStudio2

Repro: viewport <=780px. Sidebar (30vh) + topbar + slots-wrap (~448px) + toolbar consumed ~760px of 800px viewport, leaving products grid in a 40px scroll trap inside .products-wrap.

Fix:
- Drop overflow:hidden from .main and overflow-y:auto from .products-wrap on mobile so the whole page scrolls naturally (no nested scroll trap)
- Tighten sidebar to 22vh
- Shrink .slots max-width to 360px on mobile
- Hide the 'crop 12% from top' hint string on mobile (was wrapping the slots-label)

Verified at 600x800 via Playwright: sidebar=176, slots-wrap=332, products-header at y=597 — products visible within first scroll, full page scrolls below.

Files touched

M public/index.html

Diff

commit 6224e998d363a884ea2cbcfcb3071062fda24533
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Thu May 14 08:58:03 2026 -0700

    fix(mobile): products grid pushed off-screen below the 2x2 hero editor on narrow viewports
    
    Repro: viewport <=780px. Sidebar (30vh) + topbar + slots-wrap (~448px) + toolbar consumed ~760px of 800px viewport, leaving products grid in a 40px scroll trap inside .products-wrap.
    
    Fix:
    - Drop overflow:hidden from .main and overflow-y:auto from .products-wrap on mobile so the whole page scrolls naturally (no nested scroll trap)
    - Tighten sidebar to 22vh
    - Shrink .slots max-width to 360px on mobile
    - Hide the 'crop 12% from top' hint string on mobile (was wrapping the slots-label)
    
    Verified at 600x800 via Playwright: sidebar=176, slots-wrap=332, products-header at y=597 — products visible within first scroll, full page scrolls below.
---
 public/index.html | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index 5f97734..2ae840f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -75,10 +75,17 @@
   /* ─ controls ─ */
   .kind-toggle { background:rgba(10,10,10,0.78); border:0; color:#fff; padding:3px 7px; font-size:9px; letter-spacing:0.18em; text-transform:uppercase; cursor:pointer; border-radius:2px; margin-left:6px; }
   .kind-toggle:hover { background:var(--accent); color:#0a0a0a; }
-  /* mobile */
+  /* mobile — let the whole page scroll naturally instead of trapping the user
+     inside a 40px products-wrap. Shrink sidebar + slot grid so the products
+     grid lands inside the first viewport without scrolling. */
   @media (max-width:780px) {
-    .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
-    .sidebar { max-height:30vh; }
+    html, body { height:auto; min-height:100%; }
+    .app { grid-template-columns: 1fr; grid-template-rows: auto auto; height:auto; min-height:100vh; }
+    .sidebar { max-height:22vh; }
+    .main { overflow:visible; }
+    .products-wrap { overflow:visible; flex:none; }
+    .slots { max-width:360px; aspect-ratio:1.6/1; }
+    .slots-label .hint { display:none; }
   }
 </style>
 </head>

← 393ad7b css: flex-shrink:0 on .topbar and .slots-wrap · back to Dw Hero Admin · fleet: honor _shared/data/dw-tossed-domains.json — exclude t a2f7a8c →