From 52efb5db38af17b40b28296fc9395ba09346cf83 Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Tue, 2 Jun 2026 19:25:14 -0400 Subject: [PATCH] =?UTF-8?q?zebra-spaces:=20hide-panel=20=E2=80=94=20thumbn?= =?UTF-8?q?ails=20fill=20the=20freed=20horizontal=20width?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two grid-only changes (no flex per CLAUDE.md): 1. When controls is collapsed, cameras-col grows from a fixed 220px to minmax(220px, 35%). On a wide viewport the freed right-side width gets split between cameras-col + timeline instead of leaving the cameras at 220px while the spotlight takes everything. 2. #tiles-thumbs goes from a single 1fr column to repeat(auto-fill, minmax(180px, 1fr)). Narrow column = 1 thumb per row (unchanged in default panel-showing layout); wide column = 2 / 3 / N thumbs per row, depending on how much space they got. Mobile breakpoint already used auto-fill with the same minmax; promoting it to all viewports unifies the rule. --- web/zebra-spaces.html | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/web/zebra-spaces.html b/web/zebra-spaces.html index 6787d04..53165dc 100644 --- a/web/zebra-spaces.html +++ b/web/zebra-spaces.html @@ -146,10 +146,14 @@ .page:has(> .cameras-col.hidden) > .timeline { grid-column: 1; } .page:has(> .cameras-col.hidden) > .controls { grid-column: 2; } - /* state: controls collapsed (right column gone) */ + /* state: controls collapsed (right column gone). The cameras column + * grows from its 220px default up to ~35% of the viewport so the + * thumbnails actually use the freed horizontal space — combined with + * the auto-fill #tiles-thumbs grid below, wide columns flow into + * multiple thumb columns instead of leaving the row half-empty. */ .page.controls-collapsed > .controls { display: none; } .page.controls-collapsed:not(:has(> .cameras-col.hidden)) { - grid-template-columns: 220px minmax(0, 1fr); + grid-template-columns: minmax(220px, 35%) minmax(0, 1fr); } /* state: controls collapsed AND no cameras → timeline owns the viewport */ .page.controls-collapsed:has(> .cameras-col.hidden) { @@ -162,7 +166,7 @@ /* pre-paint pref so a 'hidden' reload doesn't flash the panel */ html.controls-collapsed-pref .page > .controls { display: none; } html.controls-collapsed-pref .page:not(:has(> .cameras-col.hidden)) { - grid-template-columns: 220px minmax(0, 1fr); + grid-template-columns: minmax(220px, 35%) minmax(0, 1fr); } html.controls-collapsed-pref .page:has(> .cameras-col.hidden) { grid-template-columns: minmax(0, 1fr); gap: 0; @@ -248,8 +252,14 @@ * and demotes the current one back to the column. */ #spotlight { display: grid; grid-template-columns: 1fr; gap: 0; } /* unified popularity-sorted thumb list — screens + cameras + game-shares - * all flow through here, ordered by tileScore() */ - #tiles-thumbs { display: grid; grid-template-columns: 1fr; gap: 0.45rem; } + * all flow through here, ordered by tileScore(). auto-fill with a + * 180px floor means: narrow columns get 1 thumb per row, wide + * columns (e.g. panel hidden) flow into 2 / 3 / N columns naturally. */ + #tiles-thumbs { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + gap: 0.45rem; + } #tiles-h2 { margin-top: 0.5rem; } #tiles-h2.hidden { display: none; } /* a thumbnail tile is the same DOM as a spotlight tile but with a @@ -3771,8 +3781,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');