The /releases page fits a 390 px phone: no sideways scroll, version rows and their actions wrap #9364

/releases did scroll sideways at 390 px, and this pull fixes that. I haven't loaded it on a phone or in a browser. The pull's preview shows the phone look: https://lab--9350--forge-trevato-apps.open-platform.sh/releases

What was wrong: the main releases table sat in a card with no scroll box, so a narrow screen pushed the whole page sideways. The keeper panel's tables already scrolled inside their own box. Two kinds of free text could also overflow: an owner's hold reason (up to 500 characters) and a keeper's reason.

What changed (src/web/pages/releases.ts):

• The releases table now sits in the existing .table-scroll box, so a narrow screen scrolls the table and not the page.
• The page body is wrapped in a [data-releases] attribute, with a small CSS block that makes free text break anywhere and keeps the hold input inside the screen. No new class; docs/design/areas/releases.md is new and describes this.

Test (test/releases-fit.test.ts): it seeds 30 releases and a 300-character unbroken hold reason, then renders /releases and asserts:

• no inline width, and no shipped rule fixes a width over 390 px;
• the [data-releases] container sets overflow-wrap: anywhere;
• the release table sits in a scroll box.

I didn't run the new test against the old code to confirm it fails there.

Checks: the new test and test/releases-page.test.ts pass (12 tests), tsc is clean, and bun scripts/design-lint.ts passes. I did not run scripts/gate.ts.

Not done: I didn't add /releases to the preview's owner look list in src/spawn/preview-looks.ts, since the issue limits the files to the page, its design doc and one test. No route, data read or src/http/api.ts changed, and no sibling page was touched.

🤖 Generated with Claude Code

Closes #9350

/releases did scroll sideways at 390 px, and this pull fixes that. I haven't loaded it on a phone or in a browser. The pull's preview shows the phone look: https://lab--9350--forge-trevato-apps.open-platform.sh/releases

What was wrong: the main releases table sat in a card with no scroll box, so a narrow screen pushed the whole page sideways. The keeper panel's tables already scrolled inside their own box. Two kinds of free text could also overflow: an owner's hold reason (up to 500 characters) and a keeper's reason.

What changed (src/web/pages/releases.ts):

• The releases table now sits in the existing .table-scroll box, so a narrow screen scrolls the table and not the page.
• The page body is wrapped in a [data-releases] attribute, with a small CSS block that makes free text break anywhere and keeps the hold input inside the screen. No new class; docs/design/areas/releases.md is new and describes this.

Test (test/releases-fit.test.ts): it seeds 30 releases and a 300-character unbroken hold reason, then renders /releases and asserts:

• no inline width, and no shipped rule fixes a width over 390 px;
• the [data-releases] container sets overflow-wrap: anywhere;
• the release table sits in a scroll box.

I didn't run the new test against the old code to confirm it fails there.

Checks: the new test and test/releases-page.test.ts pass (12 tests), tsc is clean, and bun scripts/design-lint.ts passes. I did not run scripts/gate.ts.

Not done: I didn't add /releases to the preview's owner look list in src/spawn/preview-looks.ts, since the issue limits the files to the page, its design doc and one test. No route, data read or src/http/api.ts changed, and no sibling page was touched.

🤖 Generated with Claude Code

The check failed because no commit message had a "Try:" line, which the gate requires. I pushed a new commit with one. I haven't seen the forge's re-run, but bun scripts/gate.ts passes locally and produced no output.

I added a new commit rather than rewriting the earlier one, because force pushes are refused. The commit changes no files. Its line reads: "Try: open /releases on the preview at 390 px wide; the page does not scroll sideways and the release table scrolls inside its own box."

The code and tests are as in the earlier push: the releases table now scrolls inside its own box, and free text on the page wraps. The new fit test and test/releases-page.test.ts pass.

To try it: open https://lab--9350--forge-trevato-apps.open-platform.sh/releases at 390 px wide. The page should not scroll sideways, and the release table should scroll inside its own box.

🤖 Generated with Claude Code

The /releases page is built to fit a 390 px phone: the version table scrolls inside its own box, and free text and the action rows wrap. I could not open the preview at 390 px, so the render is untested.

What changed

• src/web/pages/releases.ts: the version table now sits in the existing .table-scroll box, so the page itself does not scroll sideways. Free text under [data-releases] breaks anywhere. There is no fixed width and no new class.
• docs/design/areas/releases.md: the design note for the page.
• test/releases-fit.test.ts: four assertions on the rendered page.

Test against the base code I ran test/releases-fit.test.ts against main's releases.ts. Two of the four assertions fail there: "the long-text container wraps anywhere" and "the release table scrolls inside its own box". All four pass with the fix. The inline-width assertion passes either way, because it only pins the current state.

Preview This pull's preview is https://lab--9364--forge-trevato-apps.open-platform.sh/releases. My shell gets a 303 redirect to sign-in from it, so I could not render it or measure it at 390 px. The claim that the page does not scroll sideways rests on the markup and the tests, not on a measurement. Someone signed in should open the link at 390 px and check that the page has no sideways scroll.

Not done No JavaScript and no layout change at wider widths.

🤖 Generated with Claude Code

The /releases page now keeps the version table in its own scroll box and wraps free text, so the page itself should not scroll sideways at 390 px. I could not check that on the preview, so that part rests on the markup and the test.

• Why the render is unchecked: this pull's preview is https://lab--9364--forge-trevato-apps.open-platform.sh/releases. It answers 303 to /signin, and my shell has no sign-in, so I could not render it or measure it at 390 px. Someone signed in should open it at 390 px and check for sideways scroll.
• What changed:

- src/web/pages/releases.ts: the version table sits in the existing .table-scroll box, and free text under [data-releases] breaks anywhere. There is no fixed width and no new class. - docs/design/areas/releases.md: the design note for the page. - test/releases-fit.test.ts: four assertions on the rendered page.

• Test against the base code: I ran test/releases-fit.test.ts against main's releases.ts, and two of the four assertions fail there. They are "the long-text container wraps anywhere" and "the release table scrolls inside its own box". With the fix all four pass. The inline-width assertion passes either way, because it only pins the current state.
• No code change this round: the branch is already pushed at 6509d2a3. This round only re-ran those checks.
• Not done: no JavaScript and no layout change at wider widths.

🤖 Generated with Claude Code

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.)

I merged main into this branch, resolved the conflict in src/web/pages/releases.ts, and pushed. tsc, the gate, design-lint and the three test files I ran (releases-fit, ui-sweep, keeper-landed-doors) all pass. I did not run the full suite; the forge's check does that on the push.

main had replaced the releases version table with a list of rows. I took main's list. The branch's table-scroll wrapper no longer has a table to wrap, so it's gone, along with the now-unused pullCell helper.

I kept the [data-releases] wrapper and overflow-wrap: anywhere. Long free text, such as a 300-character hold reason, still wraps inside the page. I also kept the input[name="reason"] max-width rule. I dropped the td[colspan] rule, which only applied to the table.

I changed test/releases-fit.test.ts because it was written for the table. It now counts <li> rows instead of <tr>, and I removed the "table scrolls in its own box" test. The checks on no fixed width over 390 px and on wrapping long text are unchanged.

To try it, open /releases on the preview at 390 px width. The page should not scroll sideways.

🤖 Generated with Claude Code

/releases fits a 390 px phone without sideways scrolling. Since the merge with main, the page lists the kept releases as rows in a ul.list instead of a table.

Rows: on a narrow screen each row's text column shrinks. The short sha with its badges and the "#pull · landed · healthy since" line end in an ellipsis rather than pushing the page wider. The Roll back button stays in the row.

Free text: an owner's hold reason and a keeper's reason sit inside [data-releases], which breaks long words anywhere. The reason input is capped at 100% of its box.

Styles: the rules ship through styleCss. There is no fixed width and no new class. The keeper panel's table keeps the existing .table-scroll box.

Doc: docs/design/areas/releases.md now describes this list and these rules; it no longer mentions the version table that was removed.

Test: test/releases-fit.test.ts checks the page with a 300-character word and 30 releases. It expects at least 15 <li> rows (it used to count <tr>). It finds no inline width and no shipped width rule over 390 px, and it finds overflow-wrap: anywhere on [data-releases].

The type check, scripts/gate.ts, design-lint and the three test files that cover the page (releases-fit, ui-sweep, keeper-landed-doors) pass. The phone look has not been seen yet: the sandbox cannot read /data/looks, and the preview redirects to sign-in from the shell. The no-sideways-scroll result rests on the markup and CSS test. Adding /releases to the preview owner looks is the next step after this lands.

To try it, sign in as an owner on https://lab--9364--forge-trevato-apps.open-platform.sh/releases and narrow the window to 390 px.

🤖 Generated with Claude Code

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