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

css: .row style guide + conditional templates — fix 'log out' breaking + note overlap

Browse source 
The previous .row rule unconditionally pinned column 2 at 1fr, which
stretched whichever child happened to land there. On the screenshot
that meant the 'log out' button got stretched and wrapped its label
across two lines, and the trailing note overlapped buttons it was
supposed to describe.

New rules (now also documented in CLAUDE.md as a style guide so future
authoring is consistent):

- default .row: grid-auto-columns: max-content (everything packs at
  its natural width, no stretch)
- :has(> :first-child + input/select): template 'auto 1fr', input grows
- :has(> input/select:first-child): template '1fr', input fills, rest pack
- .row > .note: auto-drops to its own line under the buttons/inputs via
  grid-column: 1 / -1
- .row > label: white-space: normal, so long checkbox labels wrap

Applied to zebra-spaces, chat, zebra-audio. CLAUDE.md "Web style
guide — form-row patterns" table lists every supported shape so new
rows reuse the primitive instead of inventing custom layouts.
This commit is contained in:
Russell Ballestrini 2026-06-02 09:22:11 -04:00
parent a2d5071b71
commit 327cb63b00
No known key found for this signature in database
4 changed files with 102 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

23
web/zebra-audio.html
View file

@ -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();
<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">47f8c9b6c4c4e3d2dc0544cf59da1efc</span><br>
sha256 <span class="stamp-sha">a9532ca9dbe91f11d63ece9073f558e3beef5e5ead524b85972c8f0436a8aa41</span><br>
md5 <span class="stamp-md5">cca00d784accd4d70abac005cdf3b6c7</span><br>
sha256 <span class="stamp-sha">9a9e52d79a8fb6723048235562d6d81f2642fd8b7cdfe6dab9055bef8ae0eac9</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>