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

The /now/:stage pages fit a 390 px phone: no sideways scroll, long titles and run names wrap #9377

Closed opened this has it
opened this

Intent: /now/:stage (every stage the page knows) reads on a 390 px phone without sideways scroll, in the same way the issues, pulls, waves and milestones pages now do (see test/issues-fit.test.ts and test/milestones-fit.test.ts for the shape).

Done:

  • [ ] A new test/now-fit.test.ts seeds the page with long content: an unbroken 250-character word where the page shows a name or title, a long title, and many rows. It renders /now/:stage (every stage the page knows) and asserts no inline width/min-width over 390 px and no rule the page ships fixes a width over 390 px.
  • [x] The containers holding long text carry overflow-wrap: anywhere (or break-word); the test asserts it. Wide content that must not wrap (code, a tree, a table) scrolls inside its own box (overflow-x: auto), never the page.
  • [ ] Like test/milestones-fit.test.ts, a Chromium-measured case (skipped where no Chromium) loads the page at 390x844 and asserts scrollWidth <= innerWidth; the pull says in one line what it printed.
  • [x] The test fails without the fix, or, if the page already fits, it pins that and the pull says so.
  • [x] bun test and bun scripts/design-lint.ts pass.

Files: test/now-fit.test.ts, src/web/pages/now.ts, src/web/style/ (only the rules the page needs).

This adds no preview look; the preview list of looks stays as it is.

Risks: a shared component rule changed for this page reaches other pages; prefer a rule scoped to this page's class, and run the other *-fit tests.

Fits: a builder's brief (scout or mason).

commented

Reviewed pull #9393 at its head: ticked The containers holding long text carry overflow-wrap: anywhere (or break-word); the test asserts it. Wide content that must not wrap (code, a tree, a table) scrolls inside its own box (overflow-x: auto), never the page.; The test fails without the fix, or, if the page already fits, it pins that and the pull says so.; bun test and bun scripts/design-lint.ts pass.. left open: Like test/milestones-fit.test.ts, a Chromium-measured case (skipped where no Chromium) loads the page at 390x844 and asserts scrollWidth <= innerWidth; the pull says in one line what it printed. — The case exists but the pull reports no printed measurement; it was skipped in the builder sandbox..

commented

Left open after pull #9393 landed: 2 unticked items remain (A new test/now-fit.test.ts seeds the page with long content: an unbroken 250-character word where the page shows a name or title, a long title, and many rows. It renders /now/:stage (every stage the page knows) and asserts no inline width/min-width over 390 px and no rule the page ships fixes a width over 390 px.; Like test/milestones-fit.test.ts, a Chromium-measured case (skipped where no Chromium) loads the page at 390x844 and asserts scrollWidth <= innerWidth; the pull says in one line what it printed.). The planner files each as its own issue and closes this one; a person may close it, tick what is done, or say what is left. Until then the crew does not pick it again.

commented

Both open boxes are met on main: test/now-fit.test.ts (2ae49a673) seeds a 250-character word, long titles and many rows, and has the Chromium 390x844 case. Closing it as dropped.

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs