An issue's page fits a 390 px phone, and its pull says so from the forge's own measurement #9394

An issue's page now has a fit for a 390 px phone and a test that checks it. I can't say yet whether the page scrolls sideways at 390 px, because no Chromium starts in my sandbox and the measured test was skipped. That line comes from the forge check's log on this push, so it needs filling in from there:

issue look 390x844: (paste the line from the forge check's log on this pull's latest push)

Preview URL of the page: https://lab--9384--forge-trevato-apps.open-platform.sh/preview-admin/sample/issues/1

• Fix in src/web/studio/tell.ts: the issue page body sits in a [data-tell] wrapper with a small TELL_CSS block:

- [data-tell] wraps text anywhere. - Its two columns may shrink below their content. - The sub-heading row wraps. - Images stay within the card. - pre scrolls inside its own box.

• Docs: [data-tell] is named in docs/design/areas/tell.md as an attribute hook, not a new component class.
• Owner looks: PREVIEW_ISSUE_PAGE is added to src/spawn/preview-looks.ts and to the owner looks list.
• Test in test/issue-fit.test.ts: it seeds a 300-character word, a long title, 16 comments and a code block. It asserts no inline width, no shipped rule fixing a width over 390 px, and the wrap and code-scroll rules. Where a Chromium starts, it also measures at 390×844 and logs the issue look 390x844 line.

test/issue-fit.test.ts passes here: 4 pass, 1 skipped (the measured test). bun x tsc --noEmit, bun scripts/gate.ts and bun scripts/design-lint.ts pass.

test/looks.test.ts has 3 chromium-capture failures here. They fail the same without my change.

I left out the real-browser confirmation (it waits on the forge check) and any picture link, as the issue asks. No route or data read changed, and src/http/api.ts is untouched.

Closes #9384

An issue's page now has a fit for a 390 px phone and a test that checks it. I can't say yet whether the page scrolls sideways at 390 px, because no Chromium starts in my sandbox and the measured test was skipped. That line comes from the forge check's log on this push, so it needs filling in from there:

issue look 390x844: (paste the line from the forge check's log on this pull's latest push)

Preview URL of the page: https://lab--9384--forge-trevato-apps.open-platform.sh/preview-admin/sample/issues/1

• Fix in src/web/studio/tell.ts: the issue page body sits in a [data-tell] wrapper with a small TELL_CSS block:

- [data-tell] wraps text anywhere. - Its two columns may shrink below their content. - The sub-heading row wraps. - Images stay within the card. - pre scrolls inside its own box.

• Docs: [data-tell] is named in docs/design/areas/tell.md as an attribute hook, not a new component class.
• Owner looks: PREVIEW_ISSUE_PAGE is added to src/spawn/preview-looks.ts and to the owner looks list.
• Test in test/issue-fit.test.ts: it seeds a 300-character word, a long title, 16 comments and a code block. It asserts no inline width, no shipped rule fixing a width over 390 px, and the wrap and code-scroll rules. Where a Chromium starts, it also measures at 390×844 and logs the issue look 390x844 line.

test/issue-fit.test.ts passes here: 4 pass, 1 skipped (the measured test). bun x tsc --noEmit, bun scripts/gate.ts and bun scripts/design-lint.ts pass.

test/looks.test.ts has 3 chromium-capture failures here. They fail the same without my change.

I left out the real-browser confirmation (it waits on the forge check) and any picture link, as the issue asks. No route or data read changed, and src/http/api.ts is untouched.

An issue's page now wraps long text, lets its two columns shrink and scrolls code inside its own box. I haven't measured whether it scrolls sideways at 390 px. No Chromium starts in my sandbox, so that test was skipped. The line to quote comes from the forge check's log on this push:

issue look 390x844: (paste the line from the forge check's log on this pull's latest push)

Preview URL of the page: https://lab--9384--forge-trevato-apps.open-platform.sh/preview-admin/sample/issues/1

• Fix: the issue page body in src/web/studio/tell.ts sits in a [data-tell] wrapper with a small TELL_CSS block. [data-tell] is named in docs/design/areas/tell.md as an attribute hook, not a new component class.
• Owner looks: PREVIEW_ISSUE_PAGE is added to src/spawn/preview-looks.ts and to the owner looks list.
• Test (test/issue-fit.test.ts): it seeds a 300-character word, a long title, 16 comments and a code block. It asserts no inline width, no shipped rule fixing a width over 390 px, and the wrap and code-scroll rules. Where a Chromium starts, it also measures at 390×844 and logs the issue look 390x844 line. It passed here with the measured part skipped.
• Gate failure fixed: the check wanted a Try: line in a commit message. I added an empty commit carrying one: "open /preview-admin/sample/issues/1 on the preview at 390 px wide and check it does not scroll sideways". The gate passes locally.
• Other checks: bun x tsc --noEmit and bun scripts/design-lint.ts passed earlier on the same code. I didn't re-run them after the empty commit, since it changes no files.
• Known failures: test/looks.test.ts has 3 Chromium-capture failures here that also fail without my change.

I left out a picture link, as the issue asks. No route or data read changed, and src/http/api.ts is untouched.

An issue's page now has rules that stop it scrolling sideways at 390 px, but I haven't measured it in a browser. No Chromium starts in my sandbox, so that part of the test was skipped. The line to quote comes from the forge check's log on this push:

issue look 390x844: (paste the line from the forge check's log on this pull's latest push)

Preview URL of the page: https://lab--9384--forge-trevato-apps.open-platform.sh/preview-admin/sample/issues/1

• Cause of the failed check: my first version put the wrap rules in the page's own <style>. web ui > the labels form… expects that block to hold only label colours, and it failed. The fifteen failures were that one plus the whole crew-proposal suite. The crew-proposal tests passed on re-run here, and I didn't find why they failed in the check. I'm treating the fix as unconfirmed for them until the next check.
• Fix: the rules now live in the static stylesheet, src/web/style/content.ts, under [data-tell], so the page's own style is labels only again.

- Text wraps anywhere. - The two columns may shrink. - Images stay within the card. - Code scrolls inside its own box.

• Unchanged from before:

- the [data-tell] wrapper in src/web/studio/tell.ts; - PREVIEW_ISSUE_PAGE in the owner looks; - the note in docs/design/areas/tell.md.

• Test: test/issue-fit.test.ts now checks the static stylesheet for the wrap and code-scroll rules.
• Checks run here:

- test/issue-fit.test.ts, test/web-ui.test.ts and test/crew-proposal.test.ts: 52 pass. - bun x tsc --noEmit: clean. - bun scripts/gate.ts and bun scripts/design-lint.ts: pass.

The last commit carries a Try: line for the gate. No route or data read changed, and src/http/api.ts is untouched. I left out a picture link, as the issue asks.

I merged main into the branch and pushed, so the pull merges cleanly again. I still haven't measured whether the issue page scrolls sideways at 390 px, because no Chromium starts in my sandbox. That line comes from the forge check's log on this push:

issue look 390x844: (paste the line from the forge check's log on this pull's latest push)

Preview URL of the page: https://lab--9384--forge-trevato-apps.open-platform.sh/preview-admin/sample/issues/1

• Conflict: one, in src/web/style/content.ts. main had widened the overflow-wrap: anywhere line to include [data-now]. I kept that line and my [data-tell] rules (text wraps anywhere, columns shrink, code scrolls in its own box) beside it, and dropped the older copy of the line.
• Checks run here: test/issue-fit.test.ts and test/web-ui.test.ts pass (38). bun x tsc --noEmit and bun scripts/gate.ts are clean. I didn't re-run bun scripts/design-lint.ts after the merge.

The merge commit carries a Try: line for the gate. Nothing else changed from the earlier description. No route or data read changed, and I left out a picture link, as the issue asks.

I merged main into the branch again and pushed, so the pull merges cleanly. I haven't measured whether the issue page scrolls sideways at 390 px, because no Chromium starts in my sandbox. That line comes from the forge check's log on this push:

issue look 390x844: (paste the line from the forge check's log on this pull's latest push)

Preview URL of the page: https://lab--9384--forge-trevato-apps.open-platform.sh/preview-admin/sample/issues/1

The one conflict was in src/web/style/content.ts. main had added [data-apps-page] to the overflow-wrap: anywhere line. I kept main's line and my [data-tell] rules above it. The [data-tell] rules are the issue page's fit: text wraps anywhere, the columns shrink, and code scrolls in its own box.

test/issue-fit.test.ts and test/web-ui.test.ts pass here (38). bun x tsc --noEmit, bun scripts/gate.ts and bun scripts/design-lint.ts are clean. The merge commit carries a Try: line for the gate.

Nothing else changed from before. No route or data read changed, and I left out a picture link, as the issue asks.

Both review points are addressed, but the pull description still lacks the measured line.

Changed: test/issue-fit.test.ts now asserts the .page-head-sub { flex-wrap: wrap } and .comment-body img { max-width: 100% } rules in src/web/style/content.ts. It's pushed as 0a1085ba.

Checks I ran:

• The test file passes (4 pass, 1 skip).
• tsc is clean.
• No Chromium starts in my sandbox, so the 390 px measurement test is skipped here.
• I did not run bun scripts/gate.ts or scripts/design-lint.ts. This push doesn't touch src/web/, and the earlier pushes' design-lint pass is what juniper cited.

Not done: I can't read the forge check's log from here, so I don't have the real issue look 390x844: {...} line and won't invent one. Please quote it from the check on this push (0a1085ba) once it runs.

Pull description for the person updating it:

An issue's page fits a 390 px phone: the long-text wrapper wraps anywhere, the page-head meta row wraps, comment images are capped at 100% width, and code scrolls inside its own box. Forge check on the latest push: issue look 390x844: <paste the line from the check log>. Preview: https://lab--9394--forge-trevato-apps.open-platform.sh/preview-admin/sample/issues/1. No new component class and no README change.

I merged main into the branch and pushed it as b401e69c.

The only conflict was in src/web/style/content.ts, and I kept both sides' changes. This branch's [data-tell] fit rules for the issue page stay. The wrapping rule that main extended with [data-people] stays, and the line from this branch's side was a copy without it.

tsc is clean and test/issue-fit.test.ts passes (4 pass, 0 fail). That file also has a skipped test: the 390 px measurement needs a Chromium, and none starts in my sandbox. I ran only that test file, not the full suite, since the forge's check runs the full suite on the push.

The pull description still needs the real issue look 390x844: {...} line from the forge check's log on this push. I can't read that log from here.

Left #9384 open: 1 unticked item remain (The pull description says in one line whether the page scrolls sideways at 390 px, quoting the issue look 390x844 line from the forge check's log on the pull's latest push, and gives the preview URL of the page. No picture link is asked for.).