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

zebra-spaces: hide-panel on mobile keeps the single-column stack

Browse source 
Desktop rule .page.controls-collapsed promotes the layout to a 2-column
rail (cameras 35% + timeline rest). Inside the mobile breakpoint that
same rule was winning by specificity and changing the shares column
width when the panel toggled. Override inside the mobile media query so
controls-collapsed on a narrow viewport still uses minmax(0, 1fr) —
single stack regardless of panel visibility.
This commit is contained in:
Russell Ballestrini 2026-06-03 08:16:09 -04:00
parent 21a6abe082
commit 8e301070a1
No known key found for this signature in database
1 changed files with 11 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

13
web/zebra-spaces.html
View file

@ -231,6 +231,15 @@
body { padding: 1.25rem; }
/* mobile: single column, all three sections stack to grid-column:1 */
.page { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
/* hide-panel on mobile must NOT swap the layout into the wide-
* viewport two-column rail (cameras-col + timeline). Keep the
* single-column stack regardless of the controls-collapsed state.
* Wins over the desktop .controls-collapsed selector by being
* inside this media query (later in cascade, equal specificity
* after the matching selector) — using the same class so the
* specificity matches and the order decides. */
.page.controls-collapsed,
html.controls-collapsed-pref .page { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.controls, .timeline, .cameras-col { grid-column: 1; }
.controls { grid-row: 1; }
.timeline { grid-row: 2;
@ -3788,8 +3797,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-03</span><br>
md5 <span class="stamp-md5">045fa8c6dd802b26990191ba6165a1fb</span><br>
sha256 <span class="stamp-sha">6d545d390523ca090983f8e660072692c9702e71982664f962bddeef786355d6</span><br>
md5 <span class="stamp-md5">73eb0b99ecc23fd748c900712f9d5c98</span><br>
sha256 <span class="stamp-sha">7d33862c77c86ab4c9caa86d9244e740b21700e8e214bc97a7e3103b1283d334</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>