A repository's reports pages speak the home page's language #9828

The reports pages no longer use card boxes. I didn't view them in a browser or on a 390 px phone; everything below was checked with tests and lint. bun test test/reports*.test.ts (52 pass), bun x tsc --noEmit, bun scripts/gate.ts and bun scripts/design-lint.ts all came back clean. I did not measure the warm page's statement count; the change only swaps markup, so I expect it to be unchanged.

What moved (src/web/pages/reports.ts)

• Reports list (/:owner/:name/reports):

- Each filer is a <section class="settings-block"> with an <h2>, and each report is a row() in <ul class="list setting-list">, instead of a card() per report. - Each row keeps "From outside, …, not checked · time" as its meta line and holds the plain-text body, the "Sent from" page and the accept and dismiss forms. - An empty queue is one plain sentence. - The card import is gone.

• Report form (/:owner/:name/report): The form is unchanged, so an outsider can still file a report with no account. The "Report sent" notice is now a plain section instead of an empty() card.
• Untouched: Accept and dismiss are still plain POST forms. Report text is still escaped and shown as plain text, and the filer attribution is still on every report.
• Docs: docs/design/areas/comments.md gets a paragraph saying the reports pages add no component class.

Tests

• New test/reports-page-shape.test.ts asserts the headed sections and rows, escaped titles, the accept and dismiss forms, and no card class. It also checks that the sent notice and the report form have no card. It fails on the old markup.
• I changed one assertion in test/reports.test.ts: it cut out the bodiless report's block by looking for class="card, which no longer exists, so it now cuts at the row's <li. What it checks, that a report with no body draws no message div, is the same.

Not done

• No new CSS. The rows reuse .setting-list, which already wraps at 640 px, so the 390 px fit rests on that rather than a check.

Closes #9761

The reports pages no longer use card boxes. I didn't view them in a browser or on a 390 px phone; everything below was checked with tests and lint. bun test test/reports*.test.ts (52 pass), bun x tsc --noEmit, bun scripts/gate.ts and bun scripts/design-lint.ts all came back clean. I did not measure the warm page's statement count; the change only swaps markup, so I expect it to be unchanged.

What moved (src/web/pages/reports.ts)

• Reports list (/:owner/:name/reports):

- Each filer is a <section class="settings-block"> with an <h2>, and each report is a row() in <ul class="list setting-list">, instead of a card() per report. - Each row keeps "From outside, …, not checked · time" as its meta line and holds the plain-text body, the "Sent from" page and the accept and dismiss forms. - An empty queue is one plain sentence. - The card import is gone.

• Report form (/:owner/:name/report): The form is unchanged, so an outsider can still file a report with no account. The "Report sent" notice is now a plain section instead of an empty() card.
• Untouched: Accept and dismiss are still plain POST forms. Report text is still escaped and shown as plain text, and the filer attribution is still on every report.
• Docs: docs/design/areas/comments.md gets a paragraph saying the reports pages add no component class.

Tests

• New test/reports-page-shape.test.ts asserts the headed sections and rows, escaped titles, the accept and dismiss forms, and no card class. It also checks that the sent notice and the report form have no card. It fails on the old markup.
• I changed one assertion in test/reports.test.ts: it cut out the bodiless report's block by looking for class="card, which no longer exists, so it now cuts at the row's <li. What it checks, that a report with no body draws no message div, is the same.

Not done

• No new CSS. The rows reuse .setting-list, which already wraps at 640 px, so the 390 px fit rests on that rather than a check.

I made no fix, because the preview deploy did not fail. The log shows ready, serving and done for https://lab--9828--forge-trevato-apps.open-platform.sh. The line "no tests declared, none run" only says that the preview deploy has no test step. forge.json declares no test command for the app, so the deploy runs none. Tests run in the forge's check instead (gate, tsc, test shards), which is where a failing test would come back to me.

Nothing is pushed or changed since e08595f. Locally, bun test test/reports*.test.ts (52 pass), tsc, scripts/gate.ts and design-lint were clean before I pushed. If the check on #9828 fails, send me its log and I'll fix what it names.

The gate failed because no commit message in the pull had a Try: line, and the pull changes src/web/pages/reports.ts. I added an empty commit whose message carries one: "Try: open /reports on the preview and check headings sit over rows with no cards". I pushed it, so the forge should re-run the check on the new head.

I didn't run the gate, tsc or the tests here. The commit changes no code, and the failure was only the missing line.

Nothing else changed in this pull. The reports pages (src/web/pages/reports.ts) now use headings over rows instead of cards, as in the home page.

To try it, open /reports on the preview at https://lab--9828--forge-trevato-apps.open-platform.sh.

The report rows now stack their parts in reading order. I could not open the preview at 390px or 1280px from here, so the layout is untested at both widths. tsc and design-lint are clean. I ran the reports tests (test/reports.test.ts, test/reports-page-shape.test.ts) plus the design and style tests, and they pass. scripts/fast.ts said the diff was too broad to name tests, so I picked these myself.

• Row restructure (src/web/pages/reports.ts): the report no longer goes in the right-aligned .row-after flex line. Each report is a fold (open by default) whose body is a new .report-body block. It is a one-column grid holding the message, the "Sent from" hint, the accept form and the dismiss form.
• Accept form: the accept form now holds the title field and its Accept button together. The button no longer reaches the form through a form= attribute.
• CSS: .report-body is added to src/web/style/components.ts. It has 14px padding below 640px, 40px left padding above that, and overflow-wrap: anywhere so long text can't push the page sideways.
• Design doc: I named .report-body in a new docs/design/areas/reports.md, as design-lint asks.
• Empty queue: it is one sentence now: "Nothing is waiting; anyone can report a problem at …/report."
• Shape test: test/reports-page-shape.test.ts now checks four things:

- there is no row-after; - the accept form is inside the <li>, with the title input and the Accept button inside it; - Dismiss is a <button> inside a POST form to /dismiss; - the <li> contains report-body.

• Changed existing test: test/reports.test.ts pinned form="accept-<id>" on the Accept button. The button now sits inside the form, so that line checks it there instead. I kept id="accept-<id>" on the form so the other assertions are unchanged.

To check by hand, open /<owner>/<repo>/reports on the preview at 390px and 1280px and look for sideways scroll.

🤖 Generated with Claude Code

The reports page at /:owner/:name/reports is headings over rows, with no cards. Each filer is a settings-block section with an <h2>, and each report is a row() that opens into a .report-body. The body stacks the message, the "Sent from" hint, the accept form (title field and its button) and the dismiss form, one per line in reading order. Nothing sits in the one-line right-aligned .row-after slot any more. This push answers the last review:

• Docs: the paragraph in docs/design/areas/comments.md saying reports add no component class is deleted. The page's shape and .report-body are described only in docs/design/areas/reports.md.
• Fit at 390px: the page has not been looked at in a browser. Headless Chromium fails at startup in this sandbox because it may not open a Unix socket (socket() failed: Operation not permitted). So this is the test-and-lint route instead of screenshots:

- Writing the check found a real risk. A plain display: grid has an auto column that grows to its widest child, which could scroll the page sideways. .report-body now sets grid-template-columns: minmax(0, 1fr), min-width: 0 and overflow-wrap: anywhere. - Its inset is now the row's own 14px at every width. The old 40px left inset and its narrow-screen media query are gone. A report row has no lead glyph, so 40px would not have lined up under the title. - A new test in test/reports-page-shape.test.ts reads the stylesheet and pins those rules. It also fails if any .report-body rule sets a fixed pixel width, flex layout or nowrap. - The 390px and 1280px check still needs a pass in a real browser on the preview, after filing a report there.

• Statement count: a new test pins the warm page at 34 statements or fewer, with one report waiting. I measured 34 on this branch and 34 with the card version from 902f53c7, so the change costs no queries.
• Empty queue: the sentence no longer repeats the intro. It reads "Nothing is waiting at …/report." and the address is now a link.
• Accept test: in test/reports.test.ts, the check now captures the accept <form> and requires the Accept <button> inside it, so it fails if the button moves outside the form.

bun scripts/gate.ts, bun x tsc --noEmit and bun scripts/design-lint.ts pass. scripts/fast.ts said the diff was too broad to name tests, so I ran test/reports.test.ts, test/reports-page-shape.test.ts and the design and style tests, and they pass.

To try it: file a report at /<owner>/<repo>/report on the preview, then open /<owner>/<repo>/reports signed in as the owner, at 390px and 1280px.

🤖 Generated with Claude Code