From 95851371bc26515dabce7af2a7bb886fd62f9137 Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Tue, 2 Jun 2026 09:03:11 -0400 Subject: [PATCH] zebra-spaces: pin cameras column at 220px + focus-mode hides both side columns MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two layout fixes from screenshot feedback: 1. The cameras column's 220px track is now reserved unconditionally. When no camera is live, .hidden hides the section content (h2 + grid) but the column track stays put — so the timeline (with the game iframe or a live screen share) keeps its middle position instead of sliding leftmost into the cameras slot. 2. Hide-panel is now a true focus mode: clicking it collapses BOTH the cameras column AND the controls column, leaving the timeline alone to fill the full viewport. The screen-share gets 100% of the page width instead of 1fr-minus-220px. Pre-paint pref applies the same collapse so a saved 'hidden' state lands flush on first paint. --- web/zebra-spaces.html | 38 ++++++++++++++++++++++---------------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/web/zebra-spaces.html b/web/zebra-spaces.html index cd30161..5ef5425 100644 --- a/web/zebra-spaces.html +++ b/web/zebra-spaces.html @@ -100,35 +100,41 @@ * controls (kept narrow so the screen share gets maximum pixels). * Both columns get min-width:0 so they shrink without forcing a * horizontal scrollbar. */ - /* three columns: cameras-vertical | screen/timeline | controls. - * The cameras column auto-collapses to width:0 when nobody has a - * camera on (.hidden), so a typical mic-only room reads as the - * original two-column layout. */ + /* three columns: cameras (left) | timeline/screen (middle) | controls (right). + * The 220px cameras track stays reserved even when no camera is live — + * .hidden hides the section content but the column itself stays put so + * the timeline (with the game iframe or a screen share) keeps its + * middle position instead of sliding leftmost. */ .page { display: grid; - grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, 360px); + grid-template-columns: 220px minmax(0, 1fr) minmax(0, 360px); gap: 1.25rem; align-items: start; } .cameras-col { - width: 220px; min-width: 0; + min-width: 0; border-right: 1px solid #ddd; padding-right: 1.25rem; display: flex; flex-direction: column; } - .cameras-col.hidden { display: none; } - /* collapsed: right column folds away so the screen+cameras layout - * fills the viewport. */ + .cameras-col.hidden h2, + .cameras-col.hidden #cameras { display: none; } + /* hide-panel = focus mode: both side columns fold away, screen+timeline + * fills the full viewport. Cameras and controls both go to display:none + * so the screen-share / game iframe has nothing competing with it. */ .page.controls-collapsed { - grid-template-columns: minmax(0, auto) minmax(0, 1fr); - gap: 1.25rem; + grid-template-columns: minmax(0, 1fr); + gap: 0; } - .page.controls-collapsed > .controls { display: none; } + .page.controls-collapsed > .controls, + .page.controls-collapsed > .cameras-col { display: none; } .page.controls-collapsed > .timeline { border-right: none; padding-right: 0; } /* honour the pre-paint pref so first-paint matches saved state */ html.controls-collapsed-pref .page { - grid-template-columns: minmax(0, auto) minmax(0, 1fr); + grid-template-columns: minmax(0, 1fr); + gap: 0; } - html.controls-collapsed-pref .page > .controls { display: none; } + html.controls-collapsed-pref .page > .controls, + html.controls-collapsed-pref .page > .cameras-col { display: none; } html.controls-collapsed-pref .page > .timeline { border-right: none; padding-right: 0; } .timeline { border-right: 1px solid #ddd; padding-right: 1.25rem; min-height: 60vh; @@ -2249,8 +2255,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');