From e8ba836b9ccdcb9ac48e509046621befc9a779b8 Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Mon, 1 Jun 2026 15:21:38 -0400 Subject: [PATCH] zebra-spaces: shared screens render in the left column (full width), game iframe hides while sharing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously sec-screens lived inside the controls aside, capped at 520px wide — useless for any real screen view. Move it into the timeline column at the top, where there's actual horizontal space. CSS :has() on .timeline hides the game tabs + iframe whenever a screen tile is visible, so the screen owns the full left column. As soon as the last sharer stops, the game switcher returns. --- web/zebra-spaces.html | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/web/zebra-spaces.html b/web/zebra-spaces.html index bb37d5c..4c65260 100644 --- a/web/zebra-spaces.html +++ b/web/zebra-spaces.html @@ -57,19 +57,24 @@ * sinks for the WebRTC track, no UI required */ audio { display: none; } - /* screen-share thumbnails */ + /* screen-share tiles render in the LEFT (timeline) column at full width. + * When sec-screens is shown the game tabs + iframe are hidden so the + * screen owns the column. */ #screens { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } .screen-tile { border: 1px solid #000; background: #000; padding: 0; display: flex; flex-direction: column; } .screen-tile video { - width: 100%; height: auto; max-height: 70vh; display: block; background: #000; + width: 100%; height: auto; max-height: 80vh; display: block; background: #000; } .screen-tile .screen-meta { background: #111; color: #ddd; font-size: 0.7rem; padding: 0.3rem 0.5rem; display: flex; justify-content: space-between; } + /* sec-screens visible → push everything else in the timeline column down or hide */ + .timeline:has(> #sec-screens:not(.hidden)) > .game-tabs, + .timeline:has(> #sec-screens:not(.hidden)) > #game-frame { display: none; } h1 { font-family: 'chunkfiveregular', serif; font-size: 3rem; font-weight: normal; letter-spacing: 0.02em; @@ -179,6 +184,14 @@
+ + +