fix(overview): mobile-responsive baseline for the slide-deck microsite#586
Merged
Conversation
The deck was originally authored as 16:9 video frames at 1820px max-width
with a global --scale: 1.5 knob. After the GitHub Pages migration, the
absence of <meta name='viewport'> meant mobile browsers fell back to
shrink-fitting a 980px virtual viewport, masking the fact that none of
the layouts collapsed below desktop widths. This change makes the site
genuinely responsive for portrait phones (~375px) and tablets.
What landed (one PR per Sage's recommendation, not two):
1. Viewport meta tag injected into every page so mobile browsers stop
the shrink-fit fallback and honor the actual device width.
2. shared.css responsive block:
- Global media safety: img, svg { max-width: 100%; height: auto; }
- @media (max-width: 900px): --scale drops to 1.1, page padding tightens
to 20px / 24px.
- @media (max-width: 700px): --scale drops to 0.95 (floored — anything
smaller makes dense card text microscopic on phones), padding shrinks
to 14px / 18px, h1 caps at 26px * --scale, and the eyebrow grid
restructures so the wordmark logo sits on its own row above the
title + nav row (otherwise the three-cell 1fr/auto/1fr layout
overflows below ~340px).
3. Three pages with fixed-pixel grid tracks were collapsed in this PR
instead of being deferred — otherwise the viewport change would
regress them from 'tiny but laid-out' to 'horizontally scrolling':
- Page 07 (mailbox protocol): .topology grid 200px/1fr/200px stacks
vertically; .props 4-col collapses to 2-col at 900px and 1-col at
700px; .lane label column tightens on phone.
- Page 09 (branching lifecycle): .branch-labels 380px/1fr stacks;
.steps 5-col collapses to 2-col at 900px and 1-col at 700px;
SVG.git-graph removes preserveAspectRatio='none' (which was
distorting the diagram non-uniformly at any width != 1500x360)
and now scales proportionally via aspect-ratio: 1500/360. On
phone the graph-card scrolls horizontally with a 760px min-width
SVG so swim lanes stay readable instead of being crushed to a
~90px-tall strip.
- Page 12 (dashboard visibility): .layout grid 1fr/320px stacks
vertically at 900px, dashboard screenshot above side panels.
Phase 2 (a follow-up PR) will sweep the remaining repeat(N, 1fr) grids
(pages 01, 03, 04, 06, 10, 11, 13-17, index) for either auto-fit
collapse or explicit media queries. Those pages render acceptably at
narrow widths thanks to the --scale + padding response in this PR,
but will benefit from cleaner stacking.
Phase 2 of the mobile responsive work, consolidated into the same PR
as the baseline so the site doesn't ship in an intermediate state.
Each affected page now collapses its content grids on phone-portrait
viewports (<=700px) and an interim 2-column grid at tablet sizes
(<=900px) where the original was 3+ columns:
01 (origin timeline) .timeline 4-col -> 2 -> 1
02 (factory vs dark) .split 2-col -> 1 at 700
03 (agent quartet) .grid 4-col -> 2 -> 1
04 (task packet) .split + .callouts -> 1 at 700, callouts 2 at 900
05 (determinism) .split + .items -> 1 at 700
06 (cross-model) .flow stacks, .arrow-col hidden, .verdicts 4 -> 2 -> 1
08 (waves/lanes) waves scroll horizontally within their cards
(.lanes min-width 540px); .rules 3 -> 2 -> 1
10 (semantic merge) .split + .merger-grid 5 -> 2 -> 1
11 (polyrepo) .repos + .rules 3 -> 2 -> 1;
.dag flex stacks vertically and arrows rotate 90deg
13 (why pi) .reasons 3 -> 1 at 700
14 (pi caps) .capabilities 6 -> 2 -> 1
15 (get started) .steps 9 -> 2 -> 1
16 (real work) .steps 6 -> 2 -> 1
17 (sage) .cards 3 -> 2 -> 1; .flagship-inner 2-col stacks at 700
index .grid 17 cards -> 2 -> 1
Pages 02 and the index were not on the user's explicit fix list but
share the same pattern; included for consistency.
Page 06's arrow column (worker -> reviewer direction indicator) is
hidden on phone because the vertical reading order makes the
directionality implicit and the horizontal arrow would not render
sensibly between stacked actor boxes.
Page 08 keeps each wave's 3 lane cards horizontal but lets the wave
card scroll internally (lane affinity reads better laterally); only
the bottom rule summary cards collapse.
Page 11's segment-DAG arrows rotate 90deg so the polyrepo flow
reads top-to-bottom on phone.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Makes the Taskplane Overview microsite genuinely responsive on portrait phones (~375px) and tablets. Sage-reviewed plan — consolidated into one PR rather than two so the viewport change doesn't ship without the high-risk grid collapses.
Background
The deck was originally authored as 16:9 video frames at 1820px max-width with a global
--scale: 1.5knob. After the GitHub Pages migration, the absence of<meta name="viewport">meant mobile browsers fell back to shrink-fitting a 980px virtual viewport — making the deck look responsive when it actually wasn't (everything was being pinch-zoomed to ~38% scale on a 375px iPhone).What changes
Foundational
<meta name="viewport" content="width=device-width, initial-scale=1">).shared.cssresponsive block:img, svg { max-width: 100%; height: auto; }@media (max-width: 900px)—--scaledrops to 1.1, page padding tightens to 20px / 24px@media (max-width: 700px)—--scaledrops to 0.95 (floored, per Sage — anything smaller makes dense card text microscopic), padding shrinks to 14px / 18px, h1 caps at26px * var(--scale), and the eyebrow grid restructures so the wordmark logo sits on its own row above the title + nav row.Per-page (the three high-risk pages with fixed-pixel grid tracks)
.topology(200px / 1fr / 200px) stacks vertically;.props4-col collapses to 2-col at 900px and 1-col at 700px;.lanelabel column tightens on phone..branch-labels(380px / 1fr) stacks;.steps5-col collapses to 2-col at 900px and 1-col at 700px; SVG.git-graphremovespreserveAspectRatio="none"(which was distorting the diagram non-uniformly at any width ≠ 1500×360) and now scales proportionally viaaspect-ratio: 1500 / 360. On phone the graph-card scrolls horizontally with a 760px min-width SVG so swim lanes stay readable instead of being crushed to a ~90px-tall strip..layout2-col (1fr / 320px) stacks vertically at 900px; dashboard screenshot lands above the side panels.What's deferred to Phase 2
The remaining
repeat(N, 1fr)grids (pages 01, 03, 04, 06, 10, 11, 13-17, index). Those render acceptably at narrow widths thanks to the--scale+ padding response in this PR, but will benefit from cleaner stacking viaauto-fit minmax()or explicit media queries.Sage review summary
Sage pushed back on the original 2-PR plan: shipping viewport meta + token tweaks without collapsing the worst grids in the same release would trade 'tiny but laid-out' for 'actual overflow and distortion'. This PR follows Sage's consolidated baseline + 3 high-risk pages recommendation, with the breakpoint values and
--scalefloor adjusted per Sage's feedback (700px instead of 600px, 0.95 floor instead of 0.85).Validation suggested before merge
Why no release
Docs/microsite-only change. No runtime, CLI, config, or schema touched.