From 8e301070a1ec28f2c381cb74249a842141bfa7bf Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Wed, 3 Jun 2026 08:16:09 -0400 Subject: [PATCH] zebra-spaces: hide-panel on mobile keeps the single-column stack MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Desktop rule .page.controls-collapsed promotes the layout to a 2-column rail (cameras 35% + timeline rest). Inside the mobile breakpoint that same rule was winning by specificity and changing the shares column width when the panel toggled. Override inside the mobile media query so controls-collapsed on a narrow viewport still uses minmax(0, 1fr) — single stack regardless of panel visibility. --- web/zebra-spaces.html | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/web/zebra-spaces.html b/web/zebra-spaces.html index f531f64..7b63167 100644 --- a/web/zebra-spaces.html +++ b/web/zebra-spaces.html @@ -231,6 +231,15 @@ body { padding: 1.25rem; } /* mobile: single column, all three sections stack to grid-column:1 */ .page { grid-template-columns: minmax(0, 1fr); gap: 1rem; } + /* hide-panel on mobile must NOT swap the layout into the wide- + * viewport two-column rail (cameras-col + timeline). Keep the + * single-column stack regardless of the controls-collapsed state. + * Wins over the desktop .controls-collapsed selector by being + * inside this media query (later in cascade, equal specificity + * after the matching selector) — using the same class so the + * specificity matches and the order decides. */ + .page.controls-collapsed, + html.controls-collapsed-pref .page { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .controls, .timeline, .cameras-col { grid-column: 1; } .controls { grid-row: 1; } .timeline { grid-row: 2; @@ -3788,8 +3797,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');