room(TK-11100 F1): default Music Room COLLAPSED on narrow mobile (<=480px) — Steve-approved Option A

f5e589369fcb007d5328dde777ae73182783df16 · 2026-09-03 09:14:15 -0700 · Steve Abrams

On <=480px the position:fixed Music Room panel overlaid the dock controls
(measured 0/7 dock buttons tap-reachable while expanded on a 390px screen;
reproduced identically on Chromium/WebKit/Firefox/Chrome — pure layout/z-order).
On-load matchMedia(<=480px) now starts the room data-open=false so the dock is
free; one tap on #mrToggle re-expands it. Desktop/tablet keep it EXPANDED so
revealing the chrome shows a working player in one tap (CTA/screenrecord
CRITICAL #1). CSS/attr-only, reversible via git revert.

Verified local (harness ROOM_URL=127.0.0.1): dockTappableExpandedPct 0->100 on
all 3 dock buttons, dockOccludedByMusicRoom true->false; 0 new console/page
errors; mobile re-expand + desktop-stays-expanded proven via DOM.

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

Files touched

M room/index.html

Diff

commit f5e589369fcb007d5328dde777ae73182783df16
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Sep 3 09:14:15 2026 -0700

    room(TK-11100 F1): default Music Room COLLAPSED on narrow mobile (<=480px) — Steve-approved Option A
    
    On <=480px the position:fixed Music Room panel overlaid the dock controls
    (measured 0/7 dock buttons tap-reachable while expanded on a 390px screen;
    reproduced identically on Chromium/WebKit/Firefox/Chrome — pure layout/z-order).
    On-load matchMedia(<=480px) now starts the room data-open=false so the dock is
    free; one tap on #mrToggle re-expands it. Desktop/tablet keep it EXPANDED so
    revealing the chrome shows a working player in one tap (CTA/screenrecord
    CRITICAL #1). CSS/attr-only, reversible via git revert.
    
    Verified local (harness ROOM_URL=127.0.0.1): dockTappableExpandedPct 0->100 on
    all 3 dock buttons, dockOccludedByMusicRoom true->false; 0 new console/page
    errors; mobile re-expand + desktop-stays-expanded proven via DOM.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
    Claude-Session: https://claude.ai/code/session_01Ddgxmase3XCnLRxVyaE1LD
---
 room/index.html | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/room/index.html b/room/index.html
index eae4e19..3971347 100644
--- a/room/index.html
+++ b/room/index.html
@@ -1917,8 +1917,15 @@ function toggleRoom(){
 mrToggle.addEventListener('click',toggleRoom);
 mrToggle.addEventListener('keydown',e=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); toggleRoom(); } });
 
-// Music Room stays EXPANDED (incl. small screens) so revealing the chrome shows a
-// working player in one tap — no hidden second collapse (CTA/screenrecord CRITICAL #1).
+// TK-11100 F1 (Steve-approved Option A): on NARROW MOBILE (<=480px) start the Music Room
+// COLLAPSED so its position:fixed panel no longer overlays the dock controls (measured
+// 0/7 dock buttons tap-reachable while expanded on a 390px screen). One tap on #mrToggle
+// re-expands it. Desktop/tablet keep it EXPANDED so revealing the chrome shows a working
+// player in one tap (CTA/screenrecord CRITICAL #1) — those concerns don't overlap there.
+if (window.matchMedia && matchMedia('(max-width:480px)').matches){
+  room.setAttribute('data-open','false');
+  mrToggle.setAttribute('aria-expanded','false');
+}
 
 // ---- Autostart on load: queue "Me and My Uncle → Bertha → Deal" and play ----
 const WISHLIST=['Me and My Uncle','Bertha','Deal'];

← 7bf0e6c TK-11100: commit localhead QA audit trail (text/JSON only; b · back to Dead Agentabrams · docs(TK-11100): Option A patch artifact for the scarlet-rive f3c92ee →