diff --git a/zebra-report/index.html b/zebra-report/index.html
index 1116e7c..35d3ea2 100644
--- a/zebra-report/index.html
+++ b/zebra-report/index.html
@@ -54,11 +54,26 @@
button.invert { background: #000; color: #fff; }
button.invert:hover:not(:disabled) { background: #333; }
.row {
- display: grid; grid-auto-flow: column;
- grid-template-columns: max-content minmax(0, 1fr);
+ display: grid;
+ grid-auto-flow: column;
grid-auto-columns: max-content;
align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;
}
+ .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);
+ }
+ .row:has(> input[type=text]:first-child),
+ .row:has(> input[type=password]:first-child),
+ .row:has(> select:first-child) {
+ grid-template-columns: minmax(0, 1fr);
+ }
+ .row > .note {
+ grid-column: 1 / -1;
+ margin-top: 0.05rem; line-height: 1.4;
+ }
+ .row > label { white-space: normal; }
.dot {
width: 9px; height: 9px; border-radius: 50%;
border: 1px solid #000; background: #fff;
@@ -1732,8 +1747,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 a057208..a7674cf 100644
--- a/zebra-report/zebra-audio.html
+++ b/zebra-report/zebra-audio.html
@@ -40,11 +40,26 @@
button.invert { background: #000; color: #fff; }
button.invert:hover:not(:disabled) { background: #333; }
.row {
- display: grid; grid-auto-flow: column;
- grid-template-columns: max-content minmax(0, 1fr);
+ display: grid;
+ grid-auto-flow: column;
grid-auto-columns: max-content;
align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;
}
+ .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);
+ }
+ .row:has(> input[type=text]:first-child),
+ .row:has(> input[type=password]:first-child),
+ .row:has(> select:first-child) {
+ grid-template-columns: minmax(0, 1fr);
+ }
+ .row > .note {
+ grid-column: 1 / -1;
+ margin-top: 0.05rem; line-height: 1.4;
+ }
+ .row > label { white-space: normal; }
input[type=text] {
font-family: monospace; font-size: 0.9rem; border: 1px solid #000;
padding: 0.45rem; background: #fff; color: #000; min-width: 0; width: 100%;
@@ -732,8 +747,8 @@ else wirePuppet();
diff --git a/zebra-report/zebra-spaces.html b/zebra-report/zebra-spaces.html
index 6b3d54c..5f5a86f 100644
--- a/zebra-report/zebra-spaces.html
+++ b/zebra-report/zebra-spaces.html
@@ -298,19 +298,40 @@
button.invert { background: #000; color: #fff; }
button.invert:hover:not(:disabled) { background: #333; }
button.small { padding: 0.2rem 0.55rem; font-size: 0.75rem; }
- /* form rows: inline strip with a single grow track for the input/select.
- * grid-template-columns is generous enough for the common shapes:
- * label input (1) label-stretchy
- * label input button (2) label-stretchy-button
- * button button span (3) buttons-stretchy
- * Items past the third just flow into the row via grid-auto-flow. */
+ /* form-row style guide — every form row is a grid.
+ * default children pack at max-content width, no stretch
+ * ... → template "auto 1fr ..." so the
+ * input cell grows
+ * ... → template "1fr ..." so the field fills,
+ * packed siblings follow
+ * any child → moved to its own row inside the grid so
+ * long text never competes with the
+ * buttons it explains
+ * Items beyond the templated cells flow via grid-auto-columns:max-content. */
.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.6rem; margin-bottom: 0.6rem;
}
+ .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);
+ }
+ .row:has(> input[type=text]:first-child),
+ .row:has(> input[type=password]:first-child),
+ .row:has(> select:first-child) {
+ grid-template-columns: minmax(0, 1fr);
+ }
+ /* notes inside a row drop to their own line under the buttons/inputs
+ * instead of fighting them for horizontal space */
+ .row > .note {
+ grid-column: 1 / -1;
+ margin-top: 0.05rem; line-height: 1.4;
+ }
+ /* labels wrapping a checkbox + long text break naturally */
+ .row > label { white-space: normal; }
input[type=text], input[type=password] {
font-family: monospace; font-size: 0.9rem; border: 1px solid #000;
padding: 0.4rem; background: #fff; color: #000; min-width: 0; width: 100%;
@@ -2301,8 +2322,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');