The thread's comments are rows, not boxes #9701

A comment in a thread is now a row of the timeline: author, verb and time on one line, the text as .prose under it, and a hairline under the row. There is no box around it. I did not take the before/after looks at 1440 and 390, light and dark. My sandbox can't take screenshots, so nobody has seen the new rows yet. The preview deployed from this push is where to look.

What changed

• commentCard() in src/web/comments.ts now draws .comment-row with a .comment-head, replacing .card.comment with its .card-head. The issue page, the pull page and the browse view all go through it, so all three change.
• src/web/style/components.ts adds the row and head styles and the hairline under each comment's timeline item. The existing timeline line and dot are unchanged.
• test/comment-row.test.ts fails while a comment is still a .card. It checks both commentCard and threadComment for no card or card-head class, and for .comment-row and .prose comment-body being present.
• docs/design/areas/comments.md names the two new classes. The old .comment entry now says it is only the inline review comment.

I ran:

• bun scripts/design-lint.ts: clean.
• bun scripts/gate.ts: no failures. I only read the tail of its output, which was server warnings from a test run.
• bun x tsc --noEmit: clean.
• The new test plus web-ui, studio, web-origin-link and diff-review-comment: all pass.

I did not run bun scripts/fast.ts to completion. It said 1,236 of 2,229 files were reached and the run would take about 107 minutes, over its 5-minute budget, so I ran those four test files by hand. The forge's check runs the full suite on this push.

Left out

• Inline review comments in the diff view (src/web/diff-view.ts) are still .card.comment. The issue was about the thread, and a review comment sits under a code line, where the card is part of how it reads.
• The comment composer and the opening post's edit form are still cards. They are forms, not comments.

To try it Open any issue or pull with comments on the preview and look at 1440 and 390 wide, in light and dark.

Closes #9667

A comment in a thread is now a row of the timeline: author, verb and time on one line, the text as .prose under it, and a hairline under the row. There is no box around it. I did not take the before/after looks at 1440 and 390, light and dark. My sandbox can't take screenshots, so nobody has seen the new rows yet. The preview deployed from this push is where to look.

What changed

• commentCard() in src/web/comments.ts now draws .comment-row with a .comment-head, replacing .card.comment with its .card-head. The issue page, the pull page and the browse view all go through it, so all three change.
• src/web/style/components.ts adds the row and head styles and the hairline under each comment's timeline item. The existing timeline line and dot are unchanged.
• test/comment-row.test.ts fails while a comment is still a .card. It checks both commentCard and threadComment for no card or card-head class, and for .comment-row and .prose comment-body being present.
• docs/design/areas/comments.md names the two new classes. The old .comment entry now says it is only the inline review comment.

I ran:

• bun scripts/design-lint.ts: clean.
• bun scripts/gate.ts: no failures. I only read the tail of its output, which was server warnings from a test run.
• bun x tsc --noEmit: clean.
• The new test plus web-ui, studio, web-origin-link and diff-review-comment: all pass.

I did not run bun scripts/fast.ts to completion. It said 1,236 of 2,229 files were reached and the run would take about 107 minutes, over its 5-minute budget, so I ran those four test files by hand. The forge's check runs the full suite on this push.

Left out

• Inline review comments in the diff view (src/web/diff-view.ts) are still .card.comment. The issue was about the thread, and a review comment sits under a code line, where the card is part of how it reads.
• The comment composer and the opening post's edit form are still cards. They are forms, not comments.

To try it Open any issue or pull with comments on the preview and look at 1440 and 390 wide, in light and dark.

I pushed an empty commit whose message has the missing Try: line, since the gate failed only on that. The code and tests are unchanged from the first push. I didn't re-run the gate or any tests here, so the forge's check on this push is the next confirmation.

A thread comment is now a row of the timeline: author, verb and time on one line, the text as .prose, and a hairline under it. There is no box. This applies to the issue page, the pull page and the browse view.

• Changed: commentCard() in src/web/comments.ts draws .comment-row with a .comment-head. The styles are in src/web/style/components.ts and the two new classes are named in docs/design/areas/comments.md.
• Test: test/comment-row.test.ts fails while a comment is still a .card.
• Left out: inline review comments in the diff view are still cards, and so are the comment composer and the edit form. No before/after looks at 1440 and 390, light and dark: my sandbox can't take screenshots.
• Try: open any issue or pull with comments on the preview and look at 1440 and 390 wide, in light and dark.

The failing test, "a site admin reads it; everyone else gets 404", had nothing to do with the comment rows. It fails the same way on main.

test/flows-all.test.ts fixed its clock at 2026-11-08 12:00 UTC, while the /admin/flows page reads the real clock. Once real time passed that moment, every repo counted as stale. I changed the test's NOW to Date.now(). That file now passes (8 tests, 0 failures) and the fix is pushed.

I did not re-run the full suite, so the forge's check on this push will show whether anything else is red.

The comment-row change is as in the earlier pull description. I still have no before/after looks at 1440 and 390, light and dark, because my sandbox can't take screenshots. The preview is the place to see the rows.

I merged main into the branch and pushed. The only conflict was test/flows-all.test.ts, and I kept main's version of it.

main had fixed the same stale-date failure in that test, so my own change to it is now dropped. After the merge, bun x tsc --noEmit is clean, and flows-all and comment-row pass, 9 tests in all. I did not re-run the rest of the suite, so the forge's check on this push is the next confirmation.

A thread comment is now a row of the timeline: author and time, then the text as .prose, with a hairline under it and no box. This applies to the issue page, the pull page and the browse view. test/comment-row.test.ts fails if a comment is still a .card.

• Left out: inline review comments in the diff view are still cards, and so are the comment composer and edit form.
• Looks: I have no before/after looks at 1440 and 390, light and dark. My sandbox can't take screenshots.
• Try: open any issue or pull with comments on the preview and check 1440 and 390 wide, light and dark.

I fixed the dead CSS, the hairline and the area doc, and pushed. I have not attached the 1440 and 390 looks.

• Dead CSS: I removed .tl-item[data-kind="comment"] .card { margin: 0 } from src/web/style/components.ts. Nothing emits a .card inside a comment row any more.
• Hairline: I took the per-comment border-bottom off .tl-item[data-kind="comment"] and raised its padding-bottom from 12px to 16px. Padding now carries the rhythm, and the timeline line is the only rule in the thread. I did not add a hairline where the thread ends, because the composer's 16px top margin already separates the thread from it. If you want one there, say so.
• docs/design/areas/comments.md:

- .comment is now written only by reviewRows(). - .comment-body is padded inside a .comment card and unpadded in a .comment-row. - The .comment-row line no longer mentions a hairline.

• Looks: I can't take screenshots from my sandbox, so the 1440 and 390 before and after are missing. Please check the preview at https://lab--9701--forge-trevato-apps.open-platform.sh by eye. The rule you flagged is gone, so the rhythm is the thing to judge.
• Checks:

- bun scripts/design-lint.ts is clean. - bun x tsc --noEmit is clean. - I ran test/review-design.test.ts, test/design-lint.test.ts, test/comment-words.test.ts and test/thread-limits-words.test.ts, and all 33 tests pass. - scripts/fast.ts said the change reaches 1237 test files, which is too broad to name. I picked those four myself and left the full suite to the forge's check.