Put all dock pills (Pause/Restart + the 5 mode toggles) on one line

339f8607f513b9bdf8d13134be7fe6e07fd6f746 · 2026-09-03 10:00:33 -0700 · Steve Abrams

Was two vertical stacks side by side. Now a single horizontal row on
desktop widths (>=1180px) where it fits without crowding the camera
and museum-label panels; falls back to the original stacked layout
below that, same as the file's existing 820px breakpoint pattern.

Files touched

M room/index.html

Diff

commit 339f8607f513b9bdf8d13134be7fe6e07fd6f746
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Sep 3 10:00:33 2026 -0700

    Put all dock pills (Pause/Restart + the 5 mode toggles) on one line
    
    Was two vertical stacks side by side. Now a single horizontal row on
    desktop widths (>=1180px) where it fits without crowding the camera
    and museum-label panels; falls back to the original stacked layout
    below that, same as the file's existing 820px breakpoint pattern.
---
 room/index.html | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/room/index.html b/room/index.html
index 35c8ccc..f105e85 100644
--- a/room/index.html
+++ b/room/index.html
@@ -131,8 +131,13 @@
   .btn[aria-pressed="true"]:hover{background:linear-gradient(180deg,rgba(242,182,74,.28),rgba(242,182,74,.12))}
   .toggle{display:flex;flex-direction:column;gap:8px;align-items:stretch}
   .toggle .btn{justify-content:flex-start}   /* equal-width pills, left-aligned labels */
-  .toggle.pillrow{flex-direction:row;flex-wrap:wrap;align-items:center}
-  .toggle.pillrow .btn{justify-content:center}
+  /* all-toggles-on-one-line layout: Pause/Restart + the 5 mode pills as a single flat row.
+     Row below ~1180px would crowd the fixed camera-pill/label panels, so it falls back
+     to the original stacked layout there (still matches the file's other breakpoint). */
+  @media (min-width:1180px){
+    .group.pillrow .toggle{flex-direction:row;align-items:center;gap:8px}
+    .group.pillrow .toggle .btn{justify-content:center}
+  }
 
   /* ---- Camera pills ---- */
   .cams{position:fixed;left:26px;bottom:20px;z-index:7;display:flex;gap:8px;flex-direction:column}
@@ -332,12 +337,12 @@
   </div>
 
   <div class="dock" id="dock" role="group" aria-label="Visual controls">
-    <div class="group">
+    <div class="group pillrow">
       <div class="toggle">
         <button class="btn" id="playBtn" aria-pressed="true">❚❚ Pause</button>
         <button class="btn" id="restartBtn">↻ Restart</button>
       </div>
-      <div class="toggle pillrow">
+      <div class="toggle">
         <button class="btn" id="reduceBtn" aria-pressed="false">◐ Reduced Motion</button>
         <button class="btn" id="trailBtn" aria-pressed="true">✧ Motion Trails</button>
         <button class="btn" id="reactBtn" aria-pressed="false">♫ React to Music</button>

← b7cdfc8 Music room: YouTube era-matched video-library backdrop + arc · back to Dead Agentabrams · Music room: fix contrarian findings — showIdx assignment (re 9ae8b46 →