`docs/TK-11100-optionA-mobile-collapse.patch`

54 lines
From 5354d8e3c0caf1779c721bf6a8a0c122e36c3adb Mon Sep 17 00:00:00 2001
From: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu, 3 Sep 2026 09:14:15 -0700
Subject: [PATCH] =?UTF-8?q?room(TK-11100=20F1):=20default=20Music=20Room?=
 =?UTF-8?q?=20COLLAPSED=20on=20narrow=20mobile=20(<=3D480px)=20=E2=80=94?=
 =?UTF-8?q?=20Steve-approved=20Option=20A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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'];
-- 
2.55.0