studio: hard single-column mobile stack + trade-nav clip fix

c68a4c1b674d06c3f9cbbf6091610589a2a5c4c0 · 2026-05-12 16:10:59 -0700 · SteveStudio2

Validation-loop on v7 found Styles column still bleeding past 390px
viewport on mobile — root cause: position:absolute trade-nav was
widening the body's logical scroll-width, so auto-fit grid was
computing 2 columns even though viewport said 1.

Studio-scoped CSS now:
- html,body { overflow-x:clip; max-width:100vw } — prevents body
  from growing past viewport regardless of fixed/absolute children
- @media (max-width:700px) {
    .studio-3col { grid-template-columns: 1fr !important }
    #trade-nav { right: 56px !important }  // pulls Sign-In pill in
  }

Re-screened at 390x844 + 1440x900 — mobile Famous Artists row is
full-width single column, no text wrap on long names, Elements chips
fully accessible.

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

Files touched

M server.js

Diff

commit c68a4c1b674d06c3f9cbbf6091610589a2a5c4c0
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Tue May 12 16:10:59 2026 -0700

    studio: hard single-column mobile stack + trade-nav clip fix
    
    Validation-loop on v7 found Styles column still bleeding past 390px
    viewport on mobile — root cause: position:absolute trade-nav was
    widening the body's logical scroll-width, so auto-fit grid was
    computing 2 columns even though viewport said 1.
    
    Studio-scoped CSS now:
    - html,body { overflow-x:clip; max-width:100vw } — prevents body
      from growing past viewport regardless of fixed/absolute children
    - @media (max-width:700px) {
        .studio-3col { grid-template-columns: 1fr !important }
        #trade-nav { right: 56px !important }  // pulls Sign-In pill in
      }
    
    Re-screened at 390x844 + 1440x900 — mobile Famous Artists row is
    full-width single column, no text wrap on long names, Elements chips
    fully accessible.
    
    Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 server.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/server.js b/server.js
index 807f327..102aa0f 100644
--- a/server.js
+++ b/server.js
@@ -8563,6 +8563,18 @@ app.get('/studio', (_req, res) => {
     description: 'Compose a new wallpaper design from artists, styles, and your own inspiration images',
     canonical: 'https://wallco.ai/studio'
   })}
+<style>
+  /* Studio-scoped overflow hygiene — forces single-col stack on phones by
+     preventing the body from growing past viewport. Without this, any
+     fixed/absolute element (trade-nav, FAB) silently widens the body and
+     auto-fit grids miscalculate column count. */
+  html, body { overflow-x: clip; max-width: 100vw; }
+  @media (max-width: 700px) {
+    .studio-3col { grid-template-columns: 1fr !important; }
+    /* Trade-nav clip fix — pull Sign-In pill inside viewport on phones */
+    #trade-nav { right: 56px !important; }
+  }
+</style>
 <body>
 ${htmlHeader('')}
 <main style="padding:88px 18px 24px;max-width:1500px;margin:0 auto;overflow-x:clip;box-sizing:border-box">

← 4193c70 header: heavier wordmark + iOS safe-area FAB inset · back to Wallco Ai · tokens: --eyebrow type token + .eyebrow utility class (4H Pa 101b1fd →