From 5d589d9986c3a02aeb80bd36a2522dc54533b4f0 Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Tue, 2 Jun 2026 09:12:48 -0400 Subject: [PATCH] =?UTF-8?q?zebra-report:=20grid-only=20layout=20=E2=80=94?= =?UTF-8?q?=20fix=20controls-eats-viewport=20bug,=20no=20more=20flex?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zebra-report/index.html | 38 +++++++----- zebra-report/zebra-audio.html | 17 ++++-- zebra-report/zebra-spaces.html | 102 +++++++++++++++++++++------------ 3 files changed, 102 insertions(+), 55 deletions(-) diff --git a/zebra-report/index.html b/zebra-report/index.html index dd3666e..1116e7c 100644 --- a/zebra-report/index.html +++ b/zebra-report/index.html @@ -53,11 +53,16 @@ button:disabled { opacity: 0.3; cursor: default; } button.invert { background: #000; color: #fff; } button.invert:hover:not(:disabled) { background: #333; } - .row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; } + .row { + display: grid; grid-auto-flow: column; + grid-template-columns: max-content minmax(0, 1fr); + grid-auto-columns: max-content; + align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; + } .dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #000; background: #fff; - flex-shrink: 0; transition: background 0.15s; + transition: background 0.15s; } .dot.on { background: #000; } .dot.warn { background: #888; } @@ -71,8 +76,11 @@ } input[type=text], input[type=password], select { width: 100%; } textarea { width: 100%; resize: vertical; min-height: 4.5rem; } - .field-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; } - .field-row > input, .field-row > textarea { flex: 1; } + .field-row { + display: grid; grid-template-columns: minmax(0, 1fr) max-content; + gap: 0.5rem; margin-bottom: 0.5rem; + } + .field-row > input, .field-row > textarea { width: 100%; min-width: 0; } .key-display { border: 1px solid #ccc; padding: 0.5rem; font-family: monospace; font-size: 0.7rem; @@ -127,7 +135,8 @@ } details[open] > summary { margin-bottom: 0.5rem; } .mode-toggle { - display: inline-flex; border: 1px solid #000; + display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; + border: 1px solid #000; font-size: 0.78rem; user-select: none; } .mode-toggle > label { @@ -152,11 +161,14 @@ .share-box .qr-canvas { width: 320px; height: 320px; border: 1px solid #ccc; background: #fff; - display: flex; align-items: center; justify-content: center; + display: grid; place-items: center; font-size: 0.65rem; color: #999; } .share-box input { width: 100%; font-size: 0.7rem; } - .share-box .copy-row { display: flex; gap: 0.4rem; margin-top: 0.3rem; } + .share-box .copy-row { + display: grid; grid-template-columns: minmax(0, 1fr) max-content; + gap: 0.4rem; margin-top: 0.3rem; + } .share-box .copy-row button { font-size: 0.75rem; padding: 0.25rem 0.7rem; } @media (max-width: 600px) { .share-box { grid-template-columns: 1fr; } @@ -250,7 +262,7 @@ try {

identity

- +
@@ -269,7 +281,7 @@ try {

room (passphrase mode)

+ style="width:100%; min-width:0">
@@ -307,12 +319,12 @@ try {
tx -
+
0%
rx -
+
—
@@ -1720,8 +1732,8 @@ logLine('sys', 'chat content lives in encrypted SRTP audio. no IP packets carry
page integrity  ·  built 2026-06-02
- md5 0fb2dca42673efdde9164f5bc24d0200
- sha256 ba3b4ce8b96e2649f76f9b0338bde38ddcdbea148adbdfb0e23094a85999ee2b
+ md5 5ae64bcf96a54da7ea55a0df88548920
+ sha256 06a3c011ec9670d85c6ab27b8decbfcc4f78e8a9be8186407670fdf4e4cc8dfd
hashes are of this page with these two fields zeroed — to verify, blank them and re-hash
one self-contained file — save a copy and verify it against these hashes; point it at your own servers with ?signal= and ?turncred=, or host your own community
diff --git a/zebra-report/zebra-audio.html b/zebra-report/zebra-audio.html index f2d64da..a057208 100644 --- a/zebra-report/zebra-audio.html +++ b/zebra-report/zebra-audio.html @@ -39,14 +39,19 @@ button:disabled { opacity: 0.3; cursor: default; } button.invert { background: #000; color: #fff; } button.invert:hover:not(:disabled) { background: #333; } - .row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; } + .row { + display: grid; grid-auto-flow: column; + grid-template-columns: max-content minmax(0, 1fr); + grid-auto-columns: max-content; + align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; + } input[type=text] { font-family: monospace; font-size: 0.9rem; border: 1px solid #000; - padding: 0.45rem; background: #fff; color: #000; flex: 1; min-width: 0; + padding: 0.45rem; background: #fff; color: #000; min-width: 0; width: 100%; } select { font-family: monospace; font-size: 0.9rem; border: 1px solid #000; - padding: 0.45rem; background: #fff; color: #000; flex: 1; min-width: 0; cursor: pointer; + padding: 0.45rem; background: #fff; color: #000; min-width: 0; width: 100%; cursor: pointer; } .dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000; background: #fff; flex-shrink: 0; } .dot.ok { background: #060; border-color: #060; } @@ -703,7 +708,7 @@ else wirePuppet();