Dashboard: mobile layout fix (grid min-content blowout)
This commit is contained in:
parent
674ad25662
commit
48c99432fc
@ -174,7 +174,7 @@
|
||||
<!-- Anyone reading "PPS locked · ±219 ns" and wondering what that means,
|
||||
or why this box is a Pi and not an appliance, deserves one click to
|
||||
the write-up rather than a search. -->
|
||||
<a class="foot-docs" href="https://escapement.warehack.ing" rel="noopener">
|
||||
<a class="foot-docs" href="https://cuckoo.warehack.ing" rel="noopener">
|
||||
How this clock works
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 8h7M8 5l3 3-3 3"/></svg>
|
||||
</a>
|
||||
|
||||
@ -100,8 +100,22 @@ svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-wi
|
||||
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
|
||||
|
||||
/* ---------- layout ---------- */
|
||||
main { max-width: 1180px; margin: 0 auto; padding: 20px; display: grid; gap: 18px; }
|
||||
/* `grid-template-columns: minmax(0, 1fr)` is load-bearing, not decoration.
|
||||
*
|
||||
* A grid column defaults to `auto`, whose MINIMUM is min-content — and grid items
|
||||
* refuse to shrink below it. The sources table has seven columns, giving it a
|
||||
* ~700px min-content, and that number propagates up and pins `main` to 771px
|
||||
* inside a 375px phone. Every panel then overflows and the document gets a
|
||||
* horizontal scrollbar. `.table-hold { overflow-x: auto }` cannot rescue it,
|
||||
* because the wrapper's own ancestors still won't shrink.
|
||||
*
|
||||
* The 0 in minmax(0, 1fr) overrides that automatic min-content floor. Same reason
|
||||
* .panel needs min-width: 0. Remove either and mobile breaks again.
|
||||
*/
|
||||
main { max-width: 1180px; margin: 0 auto; padding: 20px;
|
||||
display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
|
||||
.panel {
|
||||
min-width: 0;
|
||||
background: linear-gradient(var(--panel), var(--bg-2));
|
||||
border: 1px solid var(--border-soft); border-radius: 16px; padding: 18px;
|
||||
box-shadow: var(--shadow);
|
||||
@ -225,7 +239,7 @@ main { max-width: 1180px; margin: 0 auto; padding: 20px; display: grid; gap: 18p
|
||||
* Clockmakers signed the backplate — the brass face only a repairer sees once
|
||||
* the case is open. This footer is that plate: a double hairline for the plate
|
||||
* edge, engraved small-caps for the name, and nothing that moves. A signature
|
||||
* should be quiet. Same markup as the docs site at escapement.warehack.ing,
|
||||
* should be quiet. Same markup as the docs site at cuckoo.warehack.ing,
|
||||
* recolored from brass to this dashboard's cyan.
|
||||
*/
|
||||
.ss-plate__link {
|
||||
@ -254,10 +268,77 @@ main { max-width: 1180px; margin: 0 auto; padding: 20px; display: grid; gap: 18p
|
||||
.ss-plate__cta svg { width: 14px; height: 14px; transition: transform .2s; }
|
||||
.ss-plate__link:hover .ss-plate__cta svg { transform: translateX(2px); }
|
||||
|
||||
/* ---------- mobile ----------
|
||||
*
|
||||
* This is a status page. On a phone you are almost always asking ONE question:
|
||||
* "is the clock still good?" So the hero answer — time, stratum, lock — must be
|
||||
* readable without scrolling, and everything else can wait below the fold.
|
||||
*
|
||||
* The tables and the signal bars scroll sideways WITHIN their panels rather than
|
||||
* being crushed into unreadability. That's deliberate: a squeezed IPv6 address
|
||||
* wrapped over four lines is worse than one you swipe.
|
||||
*/
|
||||
@media (max-width: 700px) {
|
||||
main { padding: 14px; gap: 14px; }
|
||||
.panel { padding: 14px; border-radius: 14px; }
|
||||
|
||||
/* A panel head is a title plus its readout. Side by side they fight for a
|
||||
narrow line and the title wraps mid-phrase; stacked, both stay whole. */
|
||||
.panel-head { flex-direction: column; align-items: flex-start; gap: 6px; }
|
||||
.spark-meta { font-size: 11px; }
|
||||
|
||||
/* Stack the clock above the stratum badge, and left-align the badge so the
|
||||
eye travels straight down instead of ping-ponging left-right. */
|
||||
.hero { flex-direction: column; align-items: flex-start; gap: 14px; }
|
||||
.verdict { text-align: left; width: 100%; }
|
||||
.ref-line { margin-top: 6px; }
|
||||
|
||||
/* clamp() already scales this, but 11vw on a narrow phone leaves the seconds
|
||||
hard against the edge. Give it a slightly bigger floor and tighter tracking. */
|
||||
.clock { font-size: clamp(38px, 13vw, 60px); letter-spacing: 0; }
|
||||
|
||||
/* Two columns, not one: six stat cards single-file is a lot of thumb. */
|
||||
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
||||
.card { padding: 12px; }
|
||||
.card-value { font-size: 21px; }
|
||||
|
||||
.spark-big { height: 90px; }
|
||||
.snr { min-height: 150px; }
|
||||
|
||||
/* Swipe the source table rather than wrap it. The shadow hint tells the reader
|
||||
there IS more to the right — otherwise a cut-off column just looks broken. */
|
||||
.table-hold {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background:
|
||||
linear-gradient(to right, var(--panel) 30%, transparent) left / 24px 100% no-repeat,
|
||||
linear-gradient(to left, var(--panel) 30%, transparent) right / 24px 100% no-repeat,
|
||||
radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.35), transparent) left / 12px 100% no-repeat,
|
||||
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.35), transparent) right / 12px 100% no-repeat;
|
||||
background-attachment: local, local, scroll, scroll;
|
||||
}
|
||||
.tbl { min-width: 560px; }
|
||||
|
||||
.topbar { padding: 12px 14px; }
|
||||
.brand h1 { font-size: 17px; }
|
||||
.brand-sub { font-size: 11.5px; }
|
||||
.brand-icon { width: 26px; height: 26px; }
|
||||
|
||||
.foot { padding: 10px 14px 24px; }
|
||||
/* Three items on one line is unreadable at 375px — let them stack. */
|
||||
.foot-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.ss-plate__link { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
|
||||
/* Comfortable thumb targets. The WCAG 2.2 minimum is 24px; 44px is the iOS HIG
|
||||
figure and the one that actually feels right when you're standing up. */
|
||||
@media (pointer: coarse) {
|
||||
.foot-docs, .ss-plate__link { min-height: 44px; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
|
||||
|
||||
/* "approx" marker when GPSNTP_POSITION=coarse */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user