`docs/TK-11100-390px-dock-overlap.patch`

34 lines
--- a/room/index.html	2026-09-02 10:16:38
+++ b/room/index.html	2026-09-02 10:48:30
@@ -236,15 +236,24 @@
 
   @media (max-width:820px){
     .titleplate{max-width:64vw}
-    .dock{gap:10px;padding:10px 12px}
+    /* TK-11100 mobile bottom-stack: the EXPANDED Music Room (position:fixed, taller than a 390px
+       screen) overlaid the tall wrapped dock, so every dock button hit-tested to a Music-Room
+       sibling (0/7 tap-reachable, order-independent). Stack the fixed bottom groups vertically —
+       Music Room (transport at its bottom) -> cams/label-toggle/chapters -> a compact full-width
+       dock — so nothing overlaps and every control is tap-reachable. */
+    .toggle{flex-direction:row;flex-wrap:wrap}
+    .dock{gap:5px;padding:6px 8px;left:8px;right:8px;transform:none;width:auto;
+          justify-content:center;align-content:flex-start;
+          max-height:152px;overflow-y:auto;overflow-x:hidden}
+    .dock .btn{min-height:32px;padding:0 9px;font-size:11px}
     .group + .group{padding-left:10px}
     .field{min-width:74px}
-    .cams{flex-direction:row;left:12px;bottom:100px}
+    .cams{flex-direction:row;left:12px;bottom:182px;z-index:8}
     .cams .btn{min-width:auto;padding:7px 10px}
-    .label-toggle{bottom:100px;right:12px}
-    .museum{bottom:148px;right:12px}
-    .chapters{top:auto;bottom:100px;right:12px;flex-direction:row}
-    .musicroom{top:auto;bottom:148px;left:12px;right:12px;width:auto}
+    .label-toggle{bottom:182px;right:12px;z-index:8}
+    .museum{bottom:236px;right:12px}
+    .chapters{top:auto;bottom:182px;right:12px;flex-direction:row;z-index:8}
+    .musicroom{top:auto;bottom:236px;left:12px;right:12px;width:auto}
     .musicroom .mr-tracks{max-height:96px}
   }
   @media (prefers-reduced-motion: reduce){