From 28f7e3ce9ea0e4c25235ef35fcc699ffcd6188f4 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Tue, 2 Jun 2026 09:27:55 -0400
Subject: [PATCH] css: .row uses minmax(0, max-content) so long labels shrink +
 wrap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A row containing only a long <label> (the music-mode checkbox text
'raw mic, no echo/noise cancellation (for playing audio through it)')
got auto-column max-content sizing — which is the un-wrapped width.
The column expanded past the controls track's 360px cap and pushed a
horizontal scrollbar onto the page.

Switching grid-auto-columns to minmax(0, max-content) lets the column
shrink when the container forces it to, at which point white-space:
normal can do its wrapping work. Also added min-width: 0 on .row
itself as belt-and-suspenders for nested grid containers.
---
 web/chat.html         |  9 +++++----
 web/zebra-audio.html  |  9 +++++----
 web/zebra-spaces.html | 12 ++++++++----
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/web/chat.html b/web/chat.html
index 35d3ea2..5a3438b 100644
--- a/web/chat.html
+++ b/web/chat.html
@@ -56,13 +56,14 @@
   .row {
     display: grid;
     grid-auto-flow: column;
-    grid-auto-columns: max-content;
+    grid-auto-columns: minmax(0, max-content);
     align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;
+    min-width: 0;
   }
   .row:has(> :first-child + input[type=text]),
   .row:has(> :first-child + input[type=password]),
   .row:has(> :first-child + select) {
-    grid-template-columns: max-content minmax(0, 1fr);
+    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
   }
   .row:has(> input[type=text]:first-child),
   .row:has(> input[type=password]:first-child),
@@ -1747,8 +1748,8 @@ logLine('sys', 'chat content lives in encrypted SRTP audio. no IP packets carry
 </script>
 <footer style="max-width:820px;margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
   <span style="color:#777">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-02</span><br>
-  md5 <span class="stamp-md5">6e1da66dbcde72c3d1d9956086fc78cc</span><br>
-  sha256 <span class="stamp-sha">96ede5ac72e954e4c39c3c9e3888bd3feb4c20c7dc182f22a3468befa3140849</span><br>
+  md5 <span class="stamp-md5">8d32e9b88a8f874b2e847d511cc55faf</span><br>
+  sha256 <span class="stamp-sha">9d9e3f109e90eebef43bc0babe04f21541d3e797c182db48b166eecf5a35ed91</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 it against these hashes; point it 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>
diff --git a/web/zebra-audio.html b/web/zebra-audio.html
index a7674cf..f744be0 100644
--- a/web/zebra-audio.html
+++ b/web/zebra-audio.html
@@ -42,13 +42,14 @@
   .row {
     display: grid;
     grid-auto-flow: column;
-    grid-auto-columns: max-content;
+    grid-auto-columns: minmax(0, max-content);
     align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;
+    min-width: 0;
   }
   .row:has(> :first-child + input[type=text]),
   .row:has(> :first-child + input[type=password]),
   .row:has(> :first-child + select) {
-    grid-template-columns: max-content minmax(0, 1fr);
+    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
   }
   .row:has(> input[type=text]:first-child),
   .row:has(> input[type=password]:first-child),
@@ -747,8 +748,8 @@ else wirePuppet();
 
 <footer style="max-width:560px;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-02</span><br>
-  md5 <span class="stamp-md5">cca00d784accd4d70abac005cdf3b6c7</span><br>
-  sha256 <span class="stamp-sha">9a9e52d79a8fb6723048235562d6d81f2642fd8b7cdfe6dab9055bef8ae0eac9</span><br>
+  md5 <span class="stamp-md5">6a7530604a70dd9e615906f3ae61e7a4</span><br>
+  sha256 <span class="stamp-sha">41f32dda18b77c7cbf15ad02fc708822b278d0a2ceccc6f147dbb88495c947ca</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 it against these hashes; point it 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>
diff --git a/web/zebra-spaces.html b/web/zebra-spaces.html
index 5f5a86f..3b0063d 100644
--- a/web/zebra-spaces.html
+++ b/web/zebra-spaces.html
@@ -311,13 +311,17 @@
   .row {
     display: grid;
     grid-auto-flow: column;
-    grid-auto-columns: max-content;
+    /* minmax(0,max-content) so a long single-child label (e.g. the
+     * 'music mode — …' description) can shrink and wrap inside the
+     * controls column instead of overflowing horizontally */
+    grid-auto-columns: minmax(0, max-content);
     align-items: center; gap: 0.6rem; margin-bottom: 0.6rem;
+    min-width: 0;
   }
   .row:has(> :first-child + input[type=text]),
   .row:has(> :first-child + input[type=password]),
   .row:has(> :first-child + select) {
-    grid-template-columns: max-content minmax(0, 1fr);
+    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
   }
   .row:has(> input[type=text]:first-child),
   .row:has(> input[type=password]:first-child),
@@ -2322,8 +2326,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-02</span><br>
-  md5 <span class="stamp-md5">d43eccee30cc6f4a999e3af6806138d2</span><br>
-  sha256 <span class="stamp-sha">4b481a70ef4564ed9950982d9a61d2cabd7860d1ae79f6db6caa73f443bfef2d</span><br>
+  md5 <span class="stamp-md5">5e52fb393afcebe7f8500da0ad8e3170</span><br>
+  sha256 <span class="stamp-sha">df072d2fc56d260f0c393f22fb0ba5ad59c7fe83a6f176b140434d1d56810249</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>