A crew run's page fits a 390 px phone: its log lines and file paths wrap or scroll inside their box, never the page #9359

A crew run's page now fits a 390 px phone. The head (title, the #n title link, summary) and the live region break long words anywhere. The log box already did that: .run-log has overflow-wrap: anywhere; overflow: auto and keeps its lines inside its own box. Before this change, a run's head had no wrap rule, so a long issue title or a 300-character token in the summary pushed the page sideways.

Phone look: after the preview builds, open /preview-admin/sample/runs and pick any seeded run, so the URL is /preview-admin/sample/runs/<id>. Run ids are random per preview, so I can't put a fixed link here. I haven't opened it on a phone. My shell has no browser, so the no-sideways-scroll claim rests on the test, which checks the HTML and CSS but does not lay out the page at 390 px. The seeded runs have no log lines, so the phone look only shows the head.

Does it scroll sideways? No: nothing on the page fixes a width over 390 px, and the head, the live region and the log all wrap long words.

What changed

• src/web/pages/runs.ts: RUN_PAGE_CSS is #run-head, #run-live { overflow-wrap: anywhere; }. It uses ids the page already has, and adds no new class.
• src/web/studio/run.ts: runView ships it as the page's own styleCss. This file renders runPage, so the one-line change has to be here; the issue only named pages/runs.ts.
• docs/design/areas/runs.md: a short section on the page at 390 px.
• test/run-page-fit.test.ts (new) renders a finished agent run with:

- a 300-character unbroken word in the summary and the log; - a 246-character issue title (titles are capped at 256); - a long file path; - 60+ log lines.

It asserts: - no inline width, and no rule the page ships fixes a width over 390 px; - #run-head and #run-live carry overflow-wrap: anywhere; - .run-log wraps and has overflow: auto.

With the run.ts change stashed, the wrap test fails and the other three pass.

Not done: no route, data read or src/http/api.ts change. No preview seed edit: a seeded run with long log lines would need its own issue. The runs list page is a sibling page and is out of scope. The keep_plan tool wasn't available in this run, so the issue has no plan posted.

Checks: these all pass:

• bun scripts/design-lint.ts
• bun scripts/gate.ts (prints nothing)
• bun x tsc --noEmit
• run-page-fit, studio-runs, run-page-timing, run-log-audience, run-secrets, check-running-line and card-run-link (67 tests)

scripts/fast.ts picked 1215 test files because pages/runs.ts is imported widely, so I ran the run page's own suites above and left the full suite to the forge.

🤖 Generated with Claude Code

Closes #9347

Closes #9347

A crew run's page now fits a 390 px phone. The head (title, the #n title link, summary) and the live region break long words anywhere. The log box already did that: .run-log has overflow-wrap: anywhere; overflow: auto and keeps its lines inside its own box. Before this change, a run's head had no wrap rule, so a long issue title or a 300-character token in the summary pushed the page sideways.

Phone look: after the preview builds, open /preview-admin/sample/runs and pick any seeded run, so the URL is /preview-admin/sample/runs/<id>. Run ids are random per preview, so I can't put a fixed link here. I haven't opened it on a phone. My shell has no browser, so the no-sideways-scroll claim rests on the test, which checks the HTML and CSS but does not lay out the page at 390 px. The seeded runs have no log lines, so the phone look only shows the head.

Does it scroll sideways? No: nothing on the page fixes a width over 390 px, and the head, the live region and the log all wrap long words.

What changed

• src/web/pages/runs.ts: RUN_PAGE_CSS is #run-head, #run-live { overflow-wrap: anywhere; }. It uses ids the page already has, and adds no new class.
• src/web/studio/run.ts: runView ships it as the page's own styleCss. This file renders runPage, so the one-line change has to be here; the issue only named pages/runs.ts.
• docs/design/areas/runs.md: a short section on the page at 390 px.
• test/run-page-fit.test.ts (new) renders a finished agent run with:

- a 300-character unbroken word in the summary and the log; - a 246-character issue title (titles are capped at 256); - a long file path; - 60+ log lines.

It asserts: - no inline width, and no rule the page ships fixes a width over 390 px; - #run-head and #run-live carry overflow-wrap: anywhere; - .run-log wraps and has overflow: auto.

With the run.ts change stashed, the wrap test fails and the other three pass.

Not done: no route, data read or src/http/api.ts change. No preview seed edit: a seeded run with long log lines would need its own issue. The runs list page is a sibling page and is out of scope. The keep_plan tool wasn't available in this run, so the issue has no plan posted.

Checks: these all pass:

• bun scripts/design-lint.ts
• bun scripts/gate.ts (prints nothing)
• bun x tsc --noEmit
• run-page-fit, studio-runs, run-page-timing, run-log-audience, run-secrets, check-running-line and card-run-link (67 tests)

scripts/fast.ts picked 1215 test files because pages/runs.ts is imported widely, so I ran the run page's own suites above and left the full suite to the forge.

🤖 Generated with Claude Code

Closes #9347

I changed nothing, because the preview deploy didn't fail. The forge's own record of deploy run 01m6gte3dxv4x1a416ntfsp6p7 at 3fd0ca3 has state ok. "No tests declared, none run" is that run's summary line, not an error. The log above ends with done: and the app serving, and the preview answers 200 on /, /explore and /preview-admin/sample/runs. A seeded run's page on it ships this commit's #run-head, #run-live { overflow-wrap: anywhere; }. With nothing to fix, I pushed nothing new; the pull stays at 3fd0ca3.

---

A crew run's page now fits a 390 px phone. The head (title, the #n title link, summary) and the live region break long words anywhere. The log box already did that: .run-log has overflow-wrap: anywhere; overflow: auto and keeps its lines inside its own box. Before this change, a run's head had no wrap rule, so a long issue title or a 300-character token in the summary pushed the page sideways.

Phone look: https://lab--9359--forge-trevato-apps.open-platform.sh/preview-admin/sample/runs/01m6gte538aq4znh9e3ctpf1gd is a seeded run on this pull's preview. I fetched it and it serves this commit's rule, but I haven't seen it at phone width: my shell has no browser. The seeded runs have no log lines, so the look shows the head only.

Does it scroll sideways? No: nothing on the page fixes a width over 390 px, and the head, the live region and the log all wrap long words. That rests on the test, which checks the HTML and CSS but does not lay out the page at 390 px.

What changed

• src/web/pages/runs.ts: RUN_PAGE_CSS is #run-head, #run-live { overflow-wrap: anywhere; }. It uses ids the page already has, and adds no new class.
• src/web/studio/run.ts: runView renders runPage, so it ships the rule as the page's own styleCss. The issue only named pages/runs.ts, but the one-line change has to be here.
• docs/design/areas/runs.md: a short section on the page at 390 px.
• test/run-page-fit.test.ts (new) renders a finished agent run with:

- a 300-character unbroken word in the summary and the log; - a 246-character issue title (titles are capped at 256); - a long file path; - 60+ log lines.

It asserts: - no inline width, and no rule the page ships fixes a width over 390 px; - #run-head and #run-live carry overflow-wrap: anywhere; - .run-log wraps and has overflow: auto.

With the run.ts change stashed, the wrap test fails and the other three pass.

Not done: no route, data read or src/http/api.ts change. No preview seed edit: a seeded run with long log lines would need its own issue. The runs list page is a sibling page and is out of scope. The keep_plan tool wasn't available in this run, so the issue has no plan posted.

Checks: these all pass:

• bun scripts/design-lint.ts
• bun scripts/gate.ts (prints nothing)
• bun x tsc --noEmit
• run-page-fit, studio-runs, run-page-timing, run-log-audience, run-secrets, check-running-line and card-run-link (67 tests)

scripts/fast.ts picked 1215 test files because pages/runs.ts is imported widely, so I ran the run page's own suites above and left the full suite to the forge.

🤖 Generated with Claude Code

Closes #9347

On a 390 px phone, a crew run's page no longer scrolls sideways: long words in the page's head and its live region now break anywhere and wrap. The log box already wrapped and scrolled inside its own frame, and the new test checks that too.

What moved: the run page now has its own small stylesheet, RUN_PAGE_CSS in src/web/pages/runs.ts. runView in src/web/studio/run.ts adds it to the page. The new class is named in docs/design/areas/runs.md. test/run-page-fit.test.ts renders a run with a very long title and log and checks that nothing is wider than the screen. Nothing else on the page changes.

The first push failed the gate's "say how to try it on the preview" rule because no commit message had a Try: line. To fix it I added an empty commit that carries the line, rather than amending the first commit, because force pushes are refused. bun scripts/gate.ts, bun x tsc --noEmit and test/run-page-fit.test.ts (4 tests) pass locally.

Not done: the rest of the run page (actions, metadata) is unchanged.

Try: on the preview, open /runs/<id> for any crew run with the viewport set to 390 px wide. The head and live region wrap, and the page has no sideways scroll.

🤖 Generated with Claude Code

On a crew run's page, a long word in the head or the live log now wraps where it is, so the page doesn't scroll sideways on a 390 px phone. The run's title, the issue it's about, its summary and the live log can hold a pasted file path or a 300-character token, and those now wrap anywhere.

What changed

• src/web/pages/runs.ts adds RUN_PAGE_CSS, which is #run-head, #run-live { overflow-wrap: anywhere; }. The page ships it as its own style.
• src/web/studio/run.ts puts that style on the page. The #run-head and #run-live ids were already there.
• The log box (.run-log) already wrapped its lines and scrolled inside its own box, so it is unchanged.
• No fixed widths. No new class: docs/design/areas/runs.md describes the fix in its own section and says no class was added.
• test/run-page-fit.test.ts fails without the rule. It checks that the page carries the rule, that the head and live-region ids are present, and that a long path and a 300-character token are wrapped inside them rather than widening the page.

Try it: open https://lab--9359--forge-trevato-apps.open-platform.sh/preview-admin/sample/runs/01m6gte538aq4znh9e3ctpf1gd at 390 px wide. The real route for a run is /<owner>/<repo>/runs/<id>, for example /trevato/forge/runs/<id>.

Does it scroll sideways? It shouldn't, but that comes from the HTML and CSS only; the page was never rendered at 390 px. The fetched preview page answers 200 and contains the #run-head, #run-live { overflow-wrap: anywhere; } rule, both ids and the mobile viewport meta tag.

The code is the same as the last push and the branch is up to date with origin. This round only rewrites the pull description, so there is no new commit.

🤖 Generated with Claude Code

On a crew run's page, a long word in the head or the live log now wraps where it is, so the page should not scroll sideways on a 390 px phone. The run's title, the issue it's about, its summary and the live log can hold a pasted file path or a 300-character token; those now wrap anywhere. The log box (.run-log) already wrapped its lines and scrolled inside its own box, so it is unchanged.

What changed

• src/web/pages/runs.ts adds RUN_PAGE_CSS, which is #run-head, #run-live { overflow-wrap: anywhere; }.
• src/web/studio/run.ts puts that style on the page. The #run-head and #run-live ids were already there.
• No fixed widths and no new class. docs/design/areas/runs.md describes the fix and the preview route.
• test/run-page-fit.test.ts fails without the rule. It checks that:

- the page carries the rule; - both ids are present; - a long path and a 300-character token sit inside them.

Phone look (preview): https://lab--9359--forge-trevato-apps.open-platform.sh/preview-admin/sample/runs/01m6gte538aq4znh9e3ctpf1gd

Does it scroll sideways? It shouldn't, but that comes from the HTML and CSS only; the page was never rendered at 390 px. The fetched preview page answers 200 and contains the overflow-wrap: anywhere rule, both ids and the mobile viewport tag.

Try it: open the link above at 390 px wide. A real run is at /<owner>/<repo>/runs/<id>, for example /trevato/forge/runs/<id>.

The code has not changed since the last review. The only new commit adds three lines to runs.md about the preview route.

🤖 Generated with Claude Code

Left #9347 open: 1 unticked item remain (A test renders a crew run's page with seeded long content: a 300-character unbroken word, a long title, many rows. It asserts that no inline width/min-width and no rule the page ships fixes a width over 390 px, and that the long-text containers carry overflow-wrap: anywhere (or break-word); code, logs and diffs may instead scroll inside their own box (overflow-x: auto on that box). It fails without the fix, or, if the page already fits, it pins that.).