From 8768a54519af734e0707dffbfbb6d2f19675f5bf Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Wed, 3 Jun 2026 18:48:03 -0400 Subject: [PATCH] zebra-spaces: let mod-actions wrap so stream toggle doesn't overflow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The room-member mod-actions row was hardcoded grid-auto-flow: column; grid-auto-columns: max-content; which forces every button onto one non-wrapping line. After adding the per-speaker "stream" toggle the strip got long enough (stream + → cohost + → listener + kick + ban) to overflow the side panel on common widths — kicked the page into horizontal scroll. Swap to grid-template-columns: repeat(auto-fit, max-content); so buttons flow onto a second row when the panel is narrow. Still grid (no flex per project rule). Doesn't change appearance on wide panels — only kicks in when the button strip wouldn't fit on one line. --- web/zebra-spaces.html | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/web/zebra-spaces.html b/web/zebra-spaces.html index 6540a61..6afa1dd 100644 --- a/web/zebra-spaces.html +++ b/web/zebra-spaces.html @@ -530,7 +530,13 @@ .mic { width: 18px; height: 18px; } .mic svg { width: 18px; height: 18px; display: block; } .mod-actions { - display: grid; grid-auto-flow: column; grid-auto-columns: max-content; + /* repeat(auto-fit, max-content) lets buttons wrap onto a second row + * when the panel is too narrow to hold them all on one line — was + * grid-auto-flow: column which forced a single non-wrapping line and + * the right edge of long button strips (stream + promote + demote + + * kick + ban) overflowed the side panel, triggering horizontal + * scroll. Grid still — no flex per the project rule. */ + display: grid; grid-template-columns: repeat(auto-fit, max-content); gap: 0.3rem; justify-content: start; margin-top: 0.2rem; @@ -4549,8 +4555,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');