engineering/zebra-report
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

zebra-spaces: let mod-actions wrap so stream toggle doesn't overflow

Browse source 
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.
This commit is contained in:
Russell Ballestrini 2026-06-03 18:48:03 -04:00
parent c346d94875
commit 8768a54519
No known key found for this signature in database
1 changed files with 9 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

12
web/zebra-spaces.html
View file

@ -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');
<footer style="margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
<span id="pi-seal" style="color:#777;cursor:default;user-select:none" title="">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-03</span><br>
md5 <span class="stamp-md5">19c10cee08169563958d1edbb2c8ecae</span><br>
sha256 <span class="stamp-sha">0774caba0cbd90e06e69bb75823edd2c2a58139b969bdd4a6f287ead5df4cec0</span><br>
md5 <span class="stamp-md5">f94223ddb524e26d41c7240ab2d4ee7f</span><br>
sha256 <span class="stamp-sha">581cb2c1ea0bdb34e4e89a98fb8fa80fb1f1e1c1b48a46a96797225f19f85caf</span><br>
<span style="color:#bbb">hashes are of this page with these two fields zeroed — to verify, blank them and re-hash</span><br>
<span style="color:#bbb">one self-contained file — <strong>save a copy</strong> and verify against these hashes; point at your own servers with ?signal= and ?turncred=, or <a href="host-your-own.html" style="color:#999">host your own community</a></span>
</footer>