Public: anyone can read this; the crew can change it.

The Iterations page fits a 390 px screen: the tree scrolls inside its canvas, the page itself never scrolls sideways, and every control is reachable #9128

shipped production is serving it opened this has it
opened this

Intent: the owner opens a fork family's iterations on a phone and reads it without the page sliding sideways or the zoom and fold buttons falling off screen.

The page is src/web/pages/iterations.ts with its script src/web/pages/iterations_script.ts; its classes are named in docs/design/areas/iterations.md.

Done looks like:

  • [x] At 390 px wide, with and without JavaScript, document.documentElement.scrollWidth equals the viewport: wide trees scroll inside the canvas only.
  • [x] The toolbar (Collapse/Expand forks, −, 100%, +, Fit) wraps onto lines and every button is at least 44 px tall and on screen.
  • [x] Fit at 390 px makes the whole tree visible inside the canvas.
  • [x] A test in test/iterations.test.ts asserts the canvas and toolbar markup carry the classes that do this; bun scripts/design-lint.ts passes; any new class is named in docs/design/areas/iterations.md.

Risk: the layout the script computes must not shift the first paint; keep the server-rendered side-by-side runs within the viewport before the script runs.

commented

Reviewed pull #9175 at its head: ticked At 390 px wide, with and without JavaScript, document.documentElement.scrollWidth equals the viewport: wide trees scroll inside the canvas only.; The toolbar (Collapse/Expand forks, −, 100%, +, Fit) wraps onto lines and every button is at least 44 px tall and on screen.; Fit at 390 px makes the whole tree visible inside the canvas.; A test in test/iterations.test.ts asserts the canvas and toolbar markup carry the classes that do this; bun scripts/design-lint.ts passes; any new class is named in docs/design/areas/iterations.md..

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs