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

The /now/:stage pages now wrap long titles on a 390 px phone instead of cutting them off. I could not measure this in a real browser here: no Chromium starts in this sandbox. The Chromium case is skipped here, and I have no printed numbers to report. The forge's check will run it and log them.

What changed

• src/web/pages/now.ts:

- The page is wrapped in a data-now container. - The rows go in <ul class="list setting-list">, the same wrapping list the milestones page uses. - I dropped the truncate span on the title, which was clipping long titles. - The list is now built with card(..., { pad: false }) instead of listCard.

• src/web/style/content.ts: [data-now] joins the existing [data-milestone] rule, so it gets overflow-wrap: anywhere. The rule is scoped to this page, so other pages are untouched.
• test/now-fit.test.ts is new. It seeds a 250-character unbroken pull title, a long title, and many rows, then renders all four stages (check, review, land, live). It asserts no inline width/min-width, no shipped rule fixing a width over 390 px, the wrapping list instead of truncate, and the overflow-wrap rule. The Chromium case loads each stage at 390x844 and asserts scrollWidth <= innerWidth.

How it was checked

• The test fails on the old page, which had no data-now and used truncate.
• test/now-fit.test.ts, test/now-links.test.ts, test/milestones-fit.test.ts and test/issues-fit.test.ts pass: 20 pass, 6 skipped (the Chromium cases).
• bun x tsc --noEmit, bun scripts/design-lint.ts and bun scripts/gate.ts are clean.

I did not run the full suite; the forge runs it on the push.

Not done: the live stage's title is a fixed string ("Deploy to production"), so the long word is only seeded for the other three stages.

To try it: sign in as a site admin and open /now/check, /now/review, /now/land or /now/live at 390 px.

🤖 Generated with Claude Code

Closes #9377

The /now/:stage pages now wrap long titles on a 390 px phone instead of cutting them off. I could not measure this in a real browser here: no Chromium starts in this sandbox. The Chromium case is skipped here, and I have no printed numbers to report. The forge's check will run it and log them.

What changed

• src/web/pages/now.ts:

- The page is wrapped in a data-now container. - The rows go in <ul class="list setting-list">, the same wrapping list the milestones page uses. - I dropped the truncate span on the title, which was clipping long titles. - The list is now built with card(..., { pad: false }) instead of listCard.

• src/web/style/content.ts: [data-now] joins the existing [data-milestone] rule, so it gets overflow-wrap: anywhere. The rule is scoped to this page, so other pages are untouched.
• test/now-fit.test.ts is new. It seeds a 250-character unbroken pull title, a long title, and many rows, then renders all four stages (check, review, land, live). It asserts no inline width/min-width, no shipped rule fixing a width over 390 px, the wrapping list instead of truncate, and the overflow-wrap rule. The Chromium case loads each stage at 390x844 and asserts scrollWidth <= innerWidth.

How it was checked

• The test fails on the old page, which had no data-now and used truncate.
• test/now-fit.test.ts, test/now-links.test.ts, test/milestones-fit.test.ts and test/issues-fit.test.ts pass: 20 pass, 6 skipped (the Chromium cases).
• bun x tsc --noEmit, bun scripts/design-lint.ts and bun scripts/gate.ts are clean.

I did not run the full suite; the forge runs it on the push.

Not done: the live stage's title is a fixed string ("Deploy to production"), so the long word is only seeded for the other three stages.

To try it: sign in as a site admin and open /now/check, /now/review, /now/land or /now/live at 390 px.

🤖 Generated with Claude Code

The /now/:stage pages now wrap long titles on a 390 px phone instead of cutting them off. The check failed because no commit had a Try: line. I added an empty commit carrying one and pushed it. bun scripts/gate.ts passes locally; I did not re-run the tests, since nothing in the code changed. The forge will re-run the check on the push.

What changed

• src/web/pages/now.ts wraps the page in a data-now container. The rows now sit in the same wrapping list setting-list list the milestones page uses, and I dropped the truncate span that was clipping titles.
• src/web/style/content.ts adds [data-now] to the existing overflow-wrap: anywhere rule that [data-milestone] uses, so other pages are untouched.
• test/now-fit.test.ts is new. It seeds a 250-character unbroken pull title, a long title and many rows, then renders all four stages (check, review, land, live). It asserts no inline width/min-width, no shipped rule fixing a width over 390 px, the wrapping list instead of truncate, and the overflow-wrap rule.
• The test's Chromium case loads each stage at 390x844 and asserts scrollWidth <= innerWidth. It is skipped in this sandbox because no Chromium starts here, so I have no printed numbers; the forge's check will log them.
• The test fails on the old page, which had no data-now and used truncate.
• The live stage's title is a fixed string ("Deploy to production"), so the long word is only seeded for the other three stages.

To try it: sign in as a site admin on the preview and open /now/check (or /now/review, /now/land, /now/live) at 390 px.

🤖 Generated with Claude Code

Left #9377 open: 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.).