diff --git a/zebra-report/index.html b/zebra-report/index.html index 35d3ea2..5a3438b 100644 --- a/zebra-report/index.html +++ b/zebra-report/index.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 diff --git a/zebra-report/zebra-audio.html b/zebra-report/zebra-audio.html index a7674cf..f744be0 100644 --- a/zebra-report/zebra-audio.html +++ b/zebra-report/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(); diff --git a/zebra-report/zebra-spaces.html b/zebra-report/zebra-spaces.html index 5f5a86f..3b0063d 100644 --- a/zebra-report/zebra-spaces.html +++ b/zebra-report/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');