The next-up page fits a 390 px phone: no sideways scroll, long names wrap #9366

The next-up page now fits a 390 px phone. The new test and the existing next-up, preview-looks and owner-looks tests pass here. bun scripts/design-lint.ts, tsc and the gate are clean. No Chromium starts in this sandbox, so the real 390 px measurement is skipped here and left to the forge's check.

Phone look: it will be at https://lab--<this pull's number>--forge-trevato-apps.open-platform.sh/preview-admin/sample/next, taken once the preview is deployed. I can't see that page, so I can't say whether it scrolls sideways. The CSS should keep it from scrolling, and the Chromium test in test/next-fit.test.ts measures sideways scroll and row height on every push.

What I found: a row's four buttons (Top, Up, Down, Not now) sat beside the row's text with flex: 1 1 0. At 390 px that could squeeze the title into a sliver. Long words were already broken by .setting-list and were not the problem.

What changed

• Page: src/web/pages/next.ts wraps the page in data-next and adds NEXT_CSS. In it, overflow-wrap: anywhere breaks long words, a row asks for 14rem, and the buttons wrap in .row-after. There is no new class, no route change and no data-read change, and src/http/api.ts is untouched.
• Docs: I added a note to docs/design/areas/next-up.md.
• Test: test/next-fit.test.ts renders the page with a 250-character unbroken title, a long title and 14 rows. It checks that no inline width or shipped rule fixes a width over 390 px and that the container wraps anywhere. It fails without the fix.
• Looks: I added PREVIEW_NEXT_PAGE to src/spawn/preview-looks.ts so the preview takes a desk and phone look of the page. That file wasn't on the issue's list, but without it there is no look to link.

What I left out

• The issue asks for a 300-character word, but a title is capped at 250 characters, so the test uses that.
• Touch dragging, which the design note already lists as a later change.

Closes #9324

The next-up page now fits a 390 px phone. The new test and the existing next-up, preview-looks and owner-looks tests pass here. bun scripts/design-lint.ts, tsc and the gate are clean. No Chromium starts in this sandbox, so the real 390 px measurement is skipped here and left to the forge's check.

Phone look: it will be at https://lab--<this pull's number>--forge-trevato-apps.open-platform.sh/preview-admin/sample/next, taken once the preview is deployed. I can't see that page, so I can't say whether it scrolls sideways. The CSS should keep it from scrolling, and the Chromium test in test/next-fit.test.ts measures sideways scroll and row height on every push.

What I found: a row's four buttons (Top, Up, Down, Not now) sat beside the row's text with flex: 1 1 0. At 390 px that could squeeze the title into a sliver. Long words were already broken by .setting-list and were not the problem.

What changed

• Page: src/web/pages/next.ts wraps the page in data-next and adds NEXT_CSS. In it, overflow-wrap: anywhere breaks long words, a row asks for 14rem, and the buttons wrap in .row-after. There is no new class, no route change and no data-read change, and src/http/api.ts is untouched.
• Docs: I added a note to docs/design/areas/next-up.md.
• Test: test/next-fit.test.ts renders the page with a 250-character unbroken title, a long title and 14 rows. It checks that no inline width or shipped rule fixes a width over 390 px and that the container wraps anywhere. It fails without the fix.
• Looks: I added PREVIEW_NEXT_PAGE to src/spawn/preview-looks.ts so the preview takes a desk and phone look of the page. That file wasn't on the issue's list, but without it there is no look to link.

What I left out

• The issue asks for a 300-character word, but a title is capped at 250 characters, so the test uses that.
• Touch dragging, which the design note already lists as a later change.

The next-up page now fits a 390 px phone: long words break anywhere and each row's actions drop under its text. I've pushed an empty commit carrying the Try: line the gate wanted. I ran bun scripts/gate.ts locally before pushing and it printed nothing. I didn't re-run the tests, since nothing but the commit message changed.

Try: open /preview-admin/sample/next on this pull's preview at 390 px wide and check that it doesn't scroll sideways.

I haven't seen the preview, so I can't say yet whether it scrolls sideways. The Chromium test in test/next-fit.test.ts measures that and the row heights on every push. It was skipped in my sandbox because no Chromium starts here.

What changed

• Page: src/web/pages/next.ts wraps the page in data-next and adds NEXT_CSS. Long words break anywhere, a row asks for 14rem, and the Top/Up/Down/Not now buttons wrap. Before, they could squeeze the title into a sliver at 390 px. No route, data read or class changed, and src/http/api.ts is untouched.
• Design note: docs/design/areas/next-up.md explains the fix.
• Test: test/next-fit.test.ts renders the page with a 250-character unbroken title, a long title and 14 rows, and it fails without the fix.
• Looks: src/spawn/preview-looks.ts adds the next-up page so the preview takes a desk and phone look of it. That file wasn't on the issue's list.

Left out

• The test uses a 250-character word, not 300, because that is the longest a title may be.
• Touch dragging stays a later change.

The pull description below links the preview page but can't say whether it scrolls sideways, which is the one thing you asked for. That needs a phone PNG of the preview. My sandbox has no browser, and the preview's /looks path gives 404 from my shell, so I couldn't take or fetch one. I did get a 200 from /preview-admin/sample/next on the preview. I'm not going to say "no sideways scroll" without having seen it. No code changed in this round, so there is nothing new to push.

This is the description to use:

The next-up page fits a 390 px phone: long words break anywhere and each row's actions drop under its text.

Phone look: https://lab--9366--forge-trevato-apps.open-platform.sh/preview-admin/sample/next. Sideways scroll: not confirmed by eye. The CSS should prevent it, and the Chromium test in test/next-fit.test.ts measures it on the forge's check, so a reviewer should open the phone look.

What changed

• Page: src/web/pages/next.ts wraps the page in data-next and adds NEXT_CSS. In it, overflow-wrap: anywhere breaks long words, a row asks for 14rem, and the Top/Up/Down/Not now buttons wrap in .row-after. Before, the buttons could squeeze a title into a sliver at 390 px. No route, data read or class changed, and src/http/api.ts is untouched.
• Design note: docs/design/areas/next-up.md explains the fix.
• Test: test/next-fit.test.ts renders the page with a long unbroken title, a long title and 14 rows, and it fails without the fix.
• Looks: src/spawn/preview-looks.ts adds the next-up page so the preview takes a desk and phone look of it. That file wasn't on the issue's list.

The test's unbroken word is 250 characters, not the 300 the issue asks for, because 250 is the longest a title may be. Touch dragging stays a later change.

Try: open /preview-admin/sample/next on the preview at 390 px wide and check it doesn't scroll sideways.

The next-up page fits a 390 px phone: long words break anywhere and each row's actions drop under its text.

Phone look: https://lab--9366--forge-trevato-apps.open-platform.sh/preview-admin/sample/next. Sideways scroll: I have not seen the phone PNG, so I can't say it doesn't scroll. My sandbox has no browser and can't fetch the picture. The CSS should prevent it. The Chromium test in test/next-fit.test.ts measures it at 390x844 on the forge's check. A reviewer should open the phone look to confirm.

What changed

• Page: src/web/pages/next.ts wraps the page in data-next and adds NEXT_CSS. In it, overflow-wrap: anywhere breaks long words, a row asks for 14rem, and the Top/Up/Down/Not now buttons wrap in .row-after. Before, the buttons could squeeze a title into a sliver at 390 px. No route, data read or class changed, and src/http/api.ts is untouched.
• Design note: docs/design/areas/next-up.md explains the fix.
• Test: test/next-fit.test.ts renders the page with a long unbroken title, a long title and 14 rows. It checks for no inline width and no shipped rule over 390 px, and that the container wraps anywhere. It fails without the fix.
• Looks: src/spawn/preview-looks.ts adds the next-up page so the preview takes a desk and phone look of it. That file wasn't on the issue's list.

The test's unbroken word is 250 characters, not the 300 the issue asks for, because 250 is the longest a title may be, so that checkbox is met on that basis. Touch dragging stays a later change.

Try: open /preview-admin/sample/next on the preview at 390 px wide and check it doesn't scroll sideways.

Handed to a person by the crew: two follow-up runs on the review's changes ended without a push, so no more start here until you say what to try. (The forge posts this under the reviewer's name; the reviewer did not write it.)

Merged main into the branch and pushed. The only conflict was in src/spawn/preview-looks.ts: both sides added a page to the owner looks list. I kept both, PREVIEW_NEXT_PAGE from this pull and PREVIEW_ISSUES_PAGE from main.

The gate and tsc are clean. The next-up fit, next-up, preview-looks and owner-looks tests pass (45 passed, 0 failed). The Chromium measurement in test/next-fit.test.ts is still skipped here because no Chromium starts in this sandbox. The forge's check runs it.

The pull description stays as before. I still haven't seen the phone look, so it makes no claim about sideways scroll.

Try: open /preview-admin/sample/next on the preview at 390 px wide and check it doesn't scroll sideways.

Those three need a real Chromium capture, which the sandbox can't do. The look tests that don't need a browser pass.

I merged main into the branch and pushed it. The only conflict was in src/spawn/preview-looks.ts, where both sides added a page to the preview list. I kept both: PREVIEW_NEXT_PAGE from this pull and PREVIEW_COMMITS_PAGE from main, and both are in PREVIEW_OWNER_LOOKS.

• Type check: tsc --noEmit is clean.
• Tests: I ran only the look tests. 88 pass and 3 fail, and I pushed with those 3 red. The failures are the real-capture ones: a capture through the grant door, a capture that ends on the browser's error page, and the dark-versus-light pixel comparison.
• Not run: scripts/gate.ts, scripts/fast.ts and the full suite. The forge's check runs the full suite on this push.

Left #9324 open: 1 unticked item remain (The pull description links the preview's phone look of /preview-admin/sample/next, and says in one line whether it scrolls sideways.).