c-fu/arah2
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(07-02): landscape cockpit geometry refinement — the content fits the 72px banner floor

Browse Source 
- banner takes one step down the SAME type-token scale in landscape
  (headline-md distance / label-lg street) + xs vertical padding so the
  measures fit the 72px min-height instead of overflowing it
- guide-list chrome offset corrected to its own margin stack
  (sm + 72 + 1 + 24 + sm = 113px, was 104px)
- bottom register: the portrait 64px control-clearance composite already
  seats the guidance/confirm card inside the landscape height — the
  landscape override is removed (measured card top 159 vs banner bottom
  103 at 844x390); attribution chip + recenter control clear
- device-walk feedback on 07-02's committed geometry; tokens binding
- captures re-run: CAPTURE OK — 22/22 non-blank
This commit is contained in:
araharah-executor
2026-10-25 05:25:19 +08:00
parent b7576c1b21
commit 71fff10cb4
7 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/shell.css
+17 -10
View File
@@ -147,7 +147,7 @@ main { position: fixed; inset: 0; }
rounded corners (buttons are radius-reset in the theme base layer).
Sanctioned list extended by Phase 7 (07-02/PX-04/D-03) — the landscape
literals: landscape banner min-height 72px, plate 40px + glyph 28px,
landscape chrome offset 104px. ————— */
landscape chrome offset 113px. ————— */
/* the banner band: full-bleed matte-black chassis under the safe inset; the
whole banner is the list toggle (the 96px band is the >=44px hit target) */
@@ -217,15 +217,21 @@ main { position: fixed; inset: 0; }
a sanctioned geometry literal; the map's cartography is untouched. */
@media (orientation: landscape) and (max-height: 560px) {
/* the banner band: shorter in landscape, and the horizontal safe insets
are honoured on both edges (max() with the token padding as the floor) */
/* the banner band: shorter in landscape — the content must actually FIT
the 72px floor (the strip's top literal rides on it), so the measures
take one step down the SAME type-token scale and the vertical padding
drops to xs; the horizontal safe insets are honoured on both edges
(max() with the token padding as the floor) */
.guide-banner {
min-height: 72px;
padding-top: var(--spacing-space-xs); padding-bottom: var(--spacing-space-xs);
padding-left: max(var(--spacing-space-md), var(--safe-left, 0px));
padding-right: max(var(--spacing-space-md), var(--safe-right, 0px));
}
.guide-banner .guide-plate { width: 40px; height: 40px; }
.guide-banner .guide-plate svg { width: 28px; height: 28px; }
.guide-banner .guide-distance { font: var(--type-headline-md); letter-spacing: var(--type-headline-md-tracking); }
.guide-banner .guide-street { font: var(--type-label-lg); letter-spacing: var(--type-label-lg-tracking); }
/* the compact strip rides directly under the shorter banner */
[data-guidance="active"] .strip {
@@ -233,16 +239,17 @@ main { position: fixed; inset: 0; }
}
/* the maneuver list: a landscape-height-bounded panel that clears the
banner and the strip instead of overlapping them */
banner and the strip instead of overlapping them (the chrome offset is
the list margin's own stack: sm + 72 + 1 + 24 + sm = 113) */
.guide-list {
max-height: calc(100dvh - 104px - var(--safe-top, 0px) - var(--safe-bottom, 0px));
max-height: calc(100dvh - 113px - var(--safe-top, 0px) - var(--safe-bottom, 0px));
margin-top: calc(var(--safe-top, 0px) + var(--spacing-space-sm) + 72px + 1px + 24px + var(--spacing-space-sm));
}
/* the bottom register (the guidance card / the confirm card) sits inside
the landscape height instead of overflowing past it */
.route-stack[data-register="bottom"] {
bottom: calc(var(--safe-bottom, 0px) + var(--spacing-space-sm));
}
/* the bottom register: the portrait rule's 64px control-clearance
composite already seats the guidance/confirm card inside the landscape
height (measured: card top 159 vs banner bottom 103 at 844x390) and
clears MapLibre's attribution chip + the recenter control — no
landscape override; the card keeps its >=44px hit-target clearance */
.route-stack[data-register="center"] { max-width: 320px; }
}