From c3597454ac6639e169d486dc8120f3738a2320fd Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Mon, 8 Jun 2026 14:46:14 -0400 Subject: [PATCH] zebra-report: deploy stacked layout below 1100px (kill cramped 3-col on iPad/split-screen) --- zebra-report/host-your-own.html | 6 +++--- zebra-report/how-it-works.html | 6 +++--- zebra-report/index.html | 6 +++--- zebra-report/zebra-audio.html | 6 +++--- zebra-report/zebra-spaces.html | 26 +++++++++++++++++--------- 5 files changed, 29 insertions(+), 21 deletions(-) diff --git a/zebra-report/host-your-own.html b/zebra-report/host-your-own.html index 8e9971c..9d1d8a8 100644 --- a/zebra-report/host-your-own.html +++ b/zebra-report/host-your-own.html @@ -507,9 +507,9 @@ handle /zebra-spaces-sfu* { reverse_proxy localhost:8092 { flush_interval -1

diff --git a/zebra-report/how-it-works.html b/zebra-report/how-it-works.html index 498b42c..c7f27a3 100644 --- a/zebra-report/how-it-works.html +++ b/zebra-report/how-it-works.html @@ -341,9 +341,9 @@ try {

diff --git a/zebra-report/index.html b/zebra-report/index.html index 3683a81..48aff05 100644 --- a/zebra-report/index.html +++ b/zebra-report/index.html @@ -1747,9 +1747,9 @@ logLine('sys', 'chat content lives in encrypted SRTP audio. no IP packets carry })(); diff --git a/zebra-report/zebra-audio.html b/zebra-report/zebra-audio.html index f0db38d..c9f7b4a 100644 --- a/zebra-report/zebra-audio.html +++ b/zebra-report/zebra-audio.html @@ -747,9 +747,9 @@ else wirePuppet(); diff --git a/zebra-report/zebra-spaces.html b/zebra-report/zebra-spaces.html index c47fa1d..a273e91 100644 --- a/zebra-report/zebra-spaces.html +++ b/zebra-report/zebra-spaces.html @@ -255,11 +255,14 @@ html.theme-dark #spotlight > .game-tile { background: #000; border-color: #000; } html.theme-dark #spotlight > .game-tile iframe { background: #000; } html.theme-dark #spotlight > .game-tile .screen-meta { background: #111; color: #ddd; } - @media (max-width: 800px) { + /* Stacked layout for narrow viewports — anything below a proper + * desktop width. 3-col only kicks in past ~1100px so iPad landscape + * (1024) and desktop split-screen halves (~960) get the same clean + * stack a phone does, instead of three cramped columns. */ + @media (max-width: 1100px) { 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- + /* hide-panel in the stacked layout must NOT swap 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 @@ -276,10 +279,6 @@ .cameras-col { grid-row: 3; border-right: none; border-top: 1px solid #ddd; padding-right: 0; padding-top: 1rem; } - /* on mobile each thumb takes a full row — a phone viewport is - * narrow enough that splitting into 2 columns of ~200px ends up - * smaller than just stacking. */ - #tiles-thumbs { grid-template-columns: minmax(0, 1fr); } } /* never let dynamically-appended