Editor fits iPhone width: narrow-screen layout (wheel above sliders, Use Photo full-width, Crop/Reset/Cancel row)

7aecde5edd5af24646921af914d331bf9bff8329 · 2026-09-25 13:12:39 -0700 · Steve Abrams

html zoom 1.35 leaves ~289 CSS px on a 390px phone; sliders/values and the action row overflowed
the right edge (scrollWidth 323 > 289). Now 0 overflow, headless-verified; desktop unchanged (<=600px only).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TZynS56oLsqJTcschug1a7

Files touched

M public/index.html

Diff

commit 7aecde5edd5af24646921af914d331bf9bff8329
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Fri Sep 25 13:12:39 2026 -0700

    Editor fits iPhone width: narrow-screen layout (wheel above sliders, Use Photo full-width, Crop/Reset/Cancel row)
    
    html zoom 1.35 leaves ~289 CSS px on a 390px phone; sliders/values and the action row overflowed
    the right edge (scrollWidth 323 > 289). Now 0 overflow, headless-verified; desktop unchanged (<=600px only).
    
    Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
    Claude-Session: https://claude.ai/code/session_01TZynS56oLsqJTcschug1a7
---
 public/index.html | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/public/index.html b/public/index.html
index 1ae78de..ce8a83a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -473,6 +473,17 @@
   .ed-reset{background:#16140f;border:1px solid var(--line);color:var(--muted)}
   .ed-cancel{background:#16140f;border:1px solid var(--red);color:var(--red)}
   .ed-use{background:var(--gold);color:#1b1407;flex:1.6}
+  /* TK-12256 follow-up: html zoom 1.35 leaves ~289 CSS px on a 390px phone — the wheel + slider grid and the
+     4-button row overflowed the right edge. Narrow screens: wheel above sliders, tighter sliders, Use Photo full-width, then Crop/Reset/Cancel. */
+  @media (max-width:600px){
+    .ed-grid{grid-template-columns:1fr;gap:10px}
+    .ed-wheel-wrap{flex-direction:row;justify-content:center;gap:12px}
+    .sliders{min-width:0}
+    .sl{grid-template-columns:62px minmax(0,1fr) 38px;gap:8px}
+    .ed-actions{flex-wrap:wrap;gap:8px}
+    .ed-actions button{flex:1 1 0;min-width:0;padding:12px 4px;font-size:14px}
+    .ed-actions .ed-use{flex-basis:100%;order:-1}
+  }
 </style>
 </head>
 <body>

← 69d5016 Front/Back tiles: tap a taken photo to adjust it in the Enha · back to Dw Photo Capture · TK-12268: add creds-in-URL fetch guard (fleet pattern) to ga 9b15829 →