The waves page fits a 390 px phone: no sideways scroll, long names wrap #9339

The waves page now wraps long headlines instead of cutting them off with an ellipsis, so a 300-character unbroken word breaks across lines at 390 px. I haven't looked at the page on a phone or in the preview. The no-sideways-scroll claim rests on the test, which checks the HTML and CSS but doesn't render the page at 390 px.

Phone look: /preview-admin/sample/waves gets a desk and phone look once the preview builds, at https://lab--9325--forge-trevato-apps.open-platform.sh/preview-admin/sample/waves. I haven't checked that URL, so confirm the look is attached before relying on it.

Does it scroll sideways? No. Nothing on the page fixes a width over 390 px, and the long text breaks anywhere.

What changed

• Waves page: the list container in src/web/pages/waves.ts carries data-waves. A small page-local stylesheet (WAVES_CSS) makes its container overflow-wrap: anywhere and lets row titles and meta wrap and grow instead of using the list's one-line ellipsis. No new class, no route and no data read changed, and src/http/api.ts is untouched.
• Preview looks: I added PREVIEW_WAVES_PAGE to src/spawn/preview-looks.ts so the owner's desk and phone looks include the waves page. The issue didn't list that file, but without it there is no phone look to link.
• Docs: docs/design/areas/waves.md is new and describes the wrap rule.

Test: test/waves-fit.test.ts seeds 30 waves, one with a 300-character unbroken headline and one with a very long headline. It asserts:

• the long content and at least 30 rows are on the page;
• there is no inline width or min-width and no shipped rule over 390 px, checking base, components, content and the page's own <style>;
• [data-waves] wraps anywhere and its row titles use white-space: normal;
• the owner looks include the phone look of the waves page.

The wrap test fails with the waves.ts change stashed and passes with it.

Checks: waves-fit, waves-page and looks-owner pass (looks-owner logged git spawn errors in the sandbox but passed), tsc --noEmit is clean, scripts/gate.ts prints nothing, and design-lint passes. I did not run the full suite.

Left out: the single-wave page (/waves/:version) uses the same row component and is not wrapped. The issue only named the list.

🤖 Generated with Claude Code

Closes #9325

The waves page now wraps long headlines instead of cutting them off with an ellipsis, so a 300-character unbroken word breaks across lines at 390 px. I haven't looked at the page on a phone or in the preview. The no-sideways-scroll claim rests on the test, which checks the HTML and CSS but doesn't render the page at 390 px.

Phone look: /preview-admin/sample/waves gets a desk and phone look once the preview builds, at https://lab--9325--forge-trevato-apps.open-platform.sh/preview-admin/sample/waves. I haven't checked that URL, so confirm the look is attached before relying on it.

Does it scroll sideways? No. Nothing on the page fixes a width over 390 px, and the long text breaks anywhere.

What changed

• Waves page: the list container in src/web/pages/waves.ts carries data-waves. A small page-local stylesheet (WAVES_CSS) makes its container overflow-wrap: anywhere and lets row titles and meta wrap and grow instead of using the list's one-line ellipsis. No new class, no route and no data read changed, and src/http/api.ts is untouched.
• Preview looks: I added PREVIEW_WAVES_PAGE to src/spawn/preview-looks.ts so the owner's desk and phone looks include the waves page. The issue didn't list that file, but without it there is no phone look to link.
• Docs: docs/design/areas/waves.md is new and describes the wrap rule.

Test: test/waves-fit.test.ts seeds 30 waves, one with a 300-character unbroken headline and one with a very long headline. It asserts:

• the long content and at least 30 rows are on the page;
• there is no inline width or min-width and no shipped rule over 390 px, checking base, components, content and the page's own <style>;
• [data-waves] wraps anywhere and its row titles use white-space: normal;
• the owner looks include the phone look of the waves page.

The wrap test fails with the waves.ts change stashed and passes with it.

Checks: waves-fit, waves-page and looks-owner pass (looks-owner logged git spawn errors in the sandbox but passed), tsc --noEmit is clean, scripts/gate.ts prints nothing, and design-lint passes. I did not run the full suite.

Left out: the single-wave page (/waves/:version) uses the same row component and is not wrapped. The issue only named the list.

🤖 Generated with Claude Code

The waves page now wraps long headlines at 390 px instead of cutting them off with an ellipsis, and the gate's missing "Try:" line is fixed.

The check failed because no commit message on the pull had a Try: line. I added an empty commit whose message has one: open /preview-admin/sample/waves on the preview at 390 px. bun scripts/gate.ts passes locally. I pushed without re-running the tests, since the commit changes no code.

What changed

• Waves page: src/web/pages/waves.ts marks the list container data-waves. A small page-local stylesheet makes it overflow-wrap: anywhere and lets row titles and meta wrap, so a 300-character unbroken word breaks across lines. No new class, route or data read.
• Preview looks: src/spawn/preview-looks.ts now includes the waves page, so the owner's desk and phone looks cover it.
• Docs: docs/design/areas/waves.md is new and describes the wrap rule.
• Test: test/waves-fit.test.ts seeds 30 waves, one with a 300-character unbroken headline and one with a very long headline. It asserts that no fixed width over 390 px is shipped, that the container wraps anywhere, and that the phone look exists. It fails without the waves.ts change.

Does it scroll sideways? No, going by the HTML and CSS the test checks. I haven't looked at the page rendered at 390 px.

Phone look: the preview should be at https://lab--9325--forge-trevato-apps.open-platform.sh/preview-admin/sample/waves. I haven't checked that URL, so confirm the look is attached before relying on it.

Left out: the single-wave page (/waves/:version) uses the same row component and is not wrapped. The issue only named the list.

🤖 Generated with Claude Code

The waves page now wraps long headlines at 390 px, but I did not load it at 390 px, so I can't say whether it scrolls sideways.

What changed

• [data-waves] now wraps long headlines instead of overflowing. It adds no class and no fixed width. A test pins it.
• Review fix 1: in src/spawn/preview-looks.ts I moved PREVIEW_WAVES_PAGE above the Later-gate comment and gave it its own one-line doc. PREVIEW_HELD_PAGE has its comment back.

Preview look

• Phone look of /preview-admin/sample/waves on this pull's preview: https://lab--9339--forge-trevato-apps.open-platform.sh/preview-admin/sample/waves
• Sideways scroll at 390 px: not checked. My sandbox has no browser, so I only confirmed the page answers 200. Please load it at 390 px, or read the phone look's recorded scrollWidth against innerWidth. The wrap test still pins the rule.

Checks run: bun x tsc --noEmit is clean and the preview-looks tests pass.

Left out

• The .setting-list wrap rule in components.ts is not shared with the waves page. I left that to a follow-up so this round stays small.
• The single-wave page keeps its ellipsis.

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