yolo-queue: DP-5 ✓ hamburger media query for mobile

7fc7f07ea9cdfbf37dfe5ad25c7623814d4d29aa · 2026-05-25 20:22:07 -0700 · Steve Abrams

Files touched

M .yolo-queue.md
M server.js

Diff

commit 7fc7f07ea9cdfbf37dfe5ad25c7623814d4d29aa
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon May 25 20:22:07 2026 -0700

    yolo-queue: DP-5 ✓ hamburger media query for mobile
---
 .yolo-queue.md |  6 +++++-
 server.js      | 14 ++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/.yolo-queue.md b/.yolo-queue.md
index 09ffca5..bd27040 100644
--- a/.yolo-queue.md
+++ b/.yolo-queue.md
@@ -68,12 +68,16 @@ never silently pause overnight.
   > 25/35/40 dark/mid/light coverage hints. Smoke-tested: bad hex → 400 w/
   > hex_format hint, valid hex → 404 (design not found, validation passed).
 
-- [ ] **DP-5** Verify the LEFT vs RIGHT hamburger button positions don't
+- [x] **DP-5** Verify the LEFT vs RIGHT hamburger button positions don't
   overlap on small screens. Currently `.admin-hamburger` is `right:124px`
   when admin (to make room for INFO at 62px), `right:62px` when not
   admin. On viewports <500px wide the INFO button may collide with the
   scale viewport. Add a media query.
 
+  > NOTE 2026-05-25 ✓ @media (max-width: 500px) compresses edit/INFO/ADMIN
+  > to 34px height + 8px top, tightened to 46/94px right offsets. Verified
+  > present in stylesheet via chrome-devtools.
+
 ## Settlement gate narrowings (attorney follow-ups)
 
 - [ ] **SG-1** Tighten `PART_B` in `scripts/settlement-gate.js`. Drop
diff --git a/server.js b/server.js
index 868c40c..7b5e594 100644
--- a/server.js
+++ b/server.js
@@ -9635,6 +9635,20 @@ ${htmlHeader('/designs')}
         /* Inside the buyer sheet, any block that arrived via the mover
            should have visible separation. */
         #buyer-sheet-body > * { margin-bottom:18px; }
+
+        /* DP-5 (2026-05-25): mobile-safe hamburger stack. On viewports
+           ≤500px wide the 3 buttons (edit ☰ + INFO + ADMIN) collapse to
+           a tighter layout — smaller height, less padding, shorter
+           inter-button gap — so they don't overlap the image or the
+           upper-right corner of the page. */
+        @media (max-width: 500px) {
+          .edit-hamburger, .admin-hamburger, .buyer-hamburger {
+            top:8px; height:34px;
+          }
+          .edit-hamburger { right:8px; width:34px; }
+          .admin-hamburger { right:46px; padding:0 8px; font-size:10px; letter-spacing:.04em; }
+          .buyer-hamburger { right:${_isAdmin ? '94px' : '46px'}; padding:0 8px; font-size:10px; letter-spacing:.04em; }
+        }
         .admin-sheet { position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:#faf7f1; box-shadow:-12px 0 40px rgba(0,0,0,.2); border-left:1px solid var(--line,#ddd); transform:translateX(100%); transition:transform .25s ease; z-index:30; overflow-y:auto; padding:18px 18px 32px; }
         .admin-sheet.open { transform:translateX(0); }
         .admin-sheet-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:29; }

← df640d3 yolo-queue: DP-3 + DP-4 ✓ hex swatches + wheel + backend hex · back to Wallco Ai · drunk-animals: tiki/cognac/champagne/smoking-bubble + textur 9228ce8 →