[object Object]

← back to Tools Dw Hub

mood-board-studio: fix mobile horizontal-scroll (public-readiness)

b5142566d299d2985f8e4d580a097cc712052a41 · 2026-07-30 17:59:50 -0700 · Steve

Now that the studio is public-facing (tools.designerwallcoverings.com), audited it
on a 390px phone viewport: the fixed 42px/.18em/nowrap wordmark forced the page to
1298px wide -> horizontal scroll (classic mobile bug). The existing @media(<=900px)
hid the sidebar but never touched the header.

Fix (scoped to <=900px, desktop untouched):
- wordmark font-size clamp(18px,6vw,34px) + reduced letter-spacing + allow wrap
- header flex-wrap so action buttons drop below the wordmark
- canvasWrap overflow:auto so board-panning stays inside the canvas, not the page

Verified :9815 @390px: horizontalScroll NO (375<390), wordmark wraps + fits, all
buttons visible; @1440: wordmark 42px/nowrap intact, sidebar visible, 12/12 load.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

Diff

commit b5142566d299d2985f8e4d580a097cc712052a41
Author: Steve <steve@designerwallcoverings.com>
Date:   Thu Jul 30 17:59:50 2026 -0700

    mood-board-studio: fix mobile horizontal-scroll (public-readiness)
    
    Now that the studio is public-facing (tools.designerwallcoverings.com), audited it
    on a 390px phone viewport: the fixed 42px/.18em/nowrap wordmark forced the page to
    1298px wide -> horizontal scroll (classic mobile bug). The existing @media(<=900px)
    hid the sidebar but never touched the header.
    
    Fix (scoped to <=900px, desktop untouched):
    - wordmark font-size clamp(18px,6vw,34px) + reduced letter-spacing + allow wrap
    - header flex-wrap so action buttons drop below the wordmark
    - canvasWrap overflow:auto so board-panning stays inside the canvas, not the page
    
    Verified :9815 @390px: horizontalScroll NO (375<390), wordmark wraps + fits, all
    buttons visible; @1440: wordmark 42px/nowrap intact, sidebar visible, 12/12 load.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 public/mood-board-studio.html | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/public/mood-board-studio.html b/public/mood-board-studio.html
index c8dcf74..d4b8565 100644
--- a/public/mood-board-studio.html
+++ b/public/mood-board-studio.html
@@ -644,8 +644,13 @@ header {
 @media (max-width: 900px) {
   .studio { grid-template-columns: 1fr; }
   .sidebar { display: none; }
-  header { padding: 0 24px; }
-  .preset-rail { padding: 12px 24px; }
+  header { padding: 10px 20px; flex-wrap: wrap; gap: 10px; min-height: 0; }
+  .preset-rail { padding: 12px 20px; }
+  /* wordmark must shrink + wrap so the page never scrolls horizontally on phones */
+  .wordmark { font-size: clamp(18px, 6vw, 34px); letter-spacing: .08em; white-space: normal; }
+  .header-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
+  /* keep the draggable board's overflow inside the canvas, not the page */
+  #canvasWrap, .canvas-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }
 }
 
 /* ============================================================

← 6a8e49a Fix sku-to-blog start command (npm start → npm run server; p  ·  back to Tools Dw Hub  ·  Add start-fleet-persistent.sh: full Mac2 tool set reboot-per a020519 →