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

zebra-spaces: stacked layout below 1100px (kill cramped 3-col on iPad/split-screen)

Browse source 
Bumps the stacked-layout breakpoint from 800px to 1100px. iPad
landscape (1024), desktop split-screen halves (~960), and tablet
portrait (768) now get the same vertical controls -> timeline ->
cameras stack a phone does, instead of three squeezed columns.

Also fixes a latent source-order cascade bug: the phone-only
#tiles-thumbs single-column override was placed before the default
auto-fill rule, so equal-specificity cascade let the default win.
Moved the override after the default; phones now actually get
single-column thumbs as the comment claimed.

Other 4 pages: stamp date bump 2026-06-07 -> 2026-06-08 from this
session's make stamp run.
This commit is contained in:
Russell Ballestrini 2026-06-08 14:45:56 -04:00
parent 2892a8f6ef
commit 45171a95c3
No known key found for this signature in database
5 changed files with 29 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/chat.html
View file

@ -1747,9 +1747,9 @@ logLine('sys', 'chat content lives in encrypted SRTP audio. no IP packets carry
})();
</script>
<footer style="max-width:820px;margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
<span style="color:#777">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-07</span><br>
md5 <span class="stamp-md5">c9fee1030b030fb1277cb89607ef7d8d</span><br>
sha256 <span class="stamp-sha">12c4070297b0d4d671e84d18891451289968f14b12fc2309f4dc85bef47528be</span><br>
<span style="color:#777">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-08</span><br>
md5 <span class="stamp-md5">68063155fd1e2138476cfd8a3518ea33</span><br>
sha256 <span class="stamp-sha">274a98127fba00617dd4540419c61b1080d2d5dcc1da48f3bc3f22d0ad415a47</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>

6
web/host-your-own.html
View file

@ -507,9 +507,9 @@ handle /zebra-spaces-sfu* { reverse_proxy localhost:8092 { flush_interval -1
</p>
<footer style="max-width:820px;margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
<span style="color:#777">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-07</span><br>
md5 <span class="stamp-md5">97108d6b240474c7e1b3bea7ae889cc4</span><br>
sha256 <span class="stamp-sha">9ac307a6b7bdedc95d44e5395a984be9ffd68d726459f96432373eb9bb67497f</span><br>
<span style="color:#777">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-08</span><br>
md5 <span class="stamp-md5">fba56654bb0331ff415d14f655ef9e72</span><br>
sha256 <span class="stamp-sha">d543c2528cb8e04f7a1e841940cd7d8ca05b1ec4b9e3e23d1623952b0eec9128</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=</span>
</footer>

6
web/how-it-works.html
View file

@ -341,9 +341,9 @@ try {
</p>
<footer style="max-width:820px;margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
<span style="color:#777">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-07</span><br>
md5 <span class="stamp-md5">402c3b4d6e72b8cc6692166fc4683978</span><br>
sha256 <span class="stamp-sha">5f0a1a8dafd2074081c9189d12455797157901f9e52bb7c4899d4c7b7dd7bf95</span><br>
<span style="color:#777">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-08</span><br>
md5 <span class="stamp-md5">afd65bceadd50f210103e4aa0db67f1e</span><br>
sha256 <span class="stamp-sha">40bce299a96e57f2835c7c6d95c40c0f24309c91498eebbf20f1b966b3c79cbf</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>

6
web/zebra-audio.html
View file

@ -747,9 +747,9 @@ else wirePuppet();
</section>
<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-07</span><br>
md5 <span class="stamp-md5">92054b1353cdbde054776ac5ed46b531</span><br>
sha256 <span class="stamp-sha">6a3dc7206ba425b7f36e8d04b2fd78a1ad53abb7033ba5a39656071591b33a34</span><br>
<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-08</span><br>
md5 <span class="stamp-md5">68333dfbb426a52482dd269ec196960b</span><br>
sha256 <span class="stamp-sha">238a9c9f9f93b64c4ed22d32db2074748418e63499996a967a9beba4ead09038</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>

26
web/zebra-spaces.html
View file

@ -255,11 +255,14 @@
html.theme-dark #spotlight > .game-tile { background: #000; border-color: #000; }
html.theme-dark #spotlight > .game-tile iframe { background: #000; }
html.theme-dark #spotlight > .game-tile .screen-meta { background: #111; color: #ddd; }
@media (max-width: 800px) {
/* Stacked layout for narrow viewports — anything below a proper
* desktop width. 3-col only kicks in past ~1100px so iPad landscape
* (1024) and desktop split-screen halves (~960) get the same clean
* stack a phone does, instead of three cramped columns. */
@media (max-width: 1100px) {
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-
/* hide-panel in the stacked layout must NOT swap 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
@ -276,10 +279,6 @@
.cameras-col { grid-row: 3;
border-right: none; border-top: 1px solid #ddd;
padding-right: 0; padding-top: 1rem; }
/* on mobile each thumb takes a full row — a phone viewport is
* narrow enough that splitting into 2 columns of ~200px ends up
* smaller than just stacking. */
#tiles-thumbs { grid-template-columns: minmax(0, 1fr); }
}
/* never let dynamically-appended <audio> sinks (one per remote
* speaker) render their default ~300px control strip — they're just
@ -300,6 +299,15 @@
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.45rem;
}
/* Phone-only: force the thumb strip to a single column. At iPad /
* split-screen widths the cameras row is already full-width, so
* the default `auto-fill, minmax(180px, 1fr)` flows into a proper
* multi-column thumb grid and looks better than one tall column.
* Placed AFTER the default rule so equal-specificity cascade lets
* this win at phone widths. */
@media (max-width: 600px) {
#tiles-thumbs { grid-template-columns: minmax(0, 1fr); }
}
#tiles-h2 { margin-top: 0.5rem; }
#tiles-h2.hidden { display: none; }
/* a thumbnail tile is the same DOM as a spotlight tile but with a
@ -8185,8 +8193,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-08</span><br>
md5 <span class="stamp-md5">f0683ffe29d81f94723827e7a30dfd79</span><br>
sha256 <span class="stamp-sha">82b472dbfb211e43d0e9a38c671fde545e87a242a8dd500115a6837d94b0d137</span><br>
md5 <span class="stamp-md5">e339a5ecf685cd8156d05ae92a5a3ff1</span><br>
sha256 <span class="stamp-sha">5d49151e9777bad0ea4a89c79dc153924c80fc2771748ffab89fef205380d36b</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>