fix(web): render right-aligned Markdown correctly

[jjjhenriksen]

What changed

• keep unordered and ordered Markdown list markers beside their text when a message is right-aligned
• preserve nested list hierarchy with an inline-end indent for nested lists
• keep loose-list markers attached to the first paragraph instead of leaving standalone markers
• mirror blockquote padding and its rule to the right side for right-aligned messages
• add an end-to-end regression covering nested lists, loose-list paragraphs, and blockquote geometry
• regenerate the checked-in embedded webassets

Why

Right-aligned messages applied text-align: right to the Markdown container but left native list and blockquote structure unchanged. Native outside list markers therefore stayed at the far left of the message while the list text moved right, as shown in the reported screenshot.

The fix uses inside list markers for the standard right-aligned layout, preserves nested list hierarchy, keeps loose-list markers attached to their first paragraph, and mirrors blockquote structure. Outlined message layout is excluded so its existing start-aligned Markdown behavior remains unchanged.

Browser proof

The proof run used a rebuilt local ClickClack server and generated right-aligned Markdown containing nested unordered and ordered lists, a loose list with multiple paragraphs, and a blockquote. Browser-observed geometry showed:

The screenshot above is attached directly to this PR description; the proof image is not part of the feature branch.

• Markdown text alignment: right
• outer list padding: 0px on both sides
• nested list inline-end padding: 22px
• list markers rendered beside their right-aligned text
• loose-list first paragraph display: inline
• blockquote rule: 3px on the right and 0px on the left
• blockquote padding: 12px on the right and 0px on the left
• no browser console errors or warnings

Validation

• pnpm exec oxfmt --check apps/web/src/styles/messages.css tests/e2e/chat.spec.ts
• pnpm exec oxlint apps/web/src tests/e2e/chat.spec.ts
• pnpm typecheck
• pnpm --filter @clickclack/web test
• git diff --check

The focused standalone Playwright test could not launch because the local Chromium executable is not installed in the Playwright cache.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 4d833d93aa

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[clawsweeper]

Codex review: needs maintainer review before merge. Reviewed August 1, 2026, 7:47 PM ET / 23:47 UTC.

ClawSweeper review

What this changes

The PR fixes right-aligned web-chat Markdown lists and blockquotes, adds an end-to-end regression test, and regenerates the SPA assets embedded in the Go server.

Merge readiness

⚠️ Needs maintainer review before merge - 2 items remain

This PR remains necessary: current main right-aligns the Markdown container but leaves native list padding and the blockquote rule on the left. The branch narrowly mirrors those structures for non-outlined right-aligned messages and adds focused browser coverage; however, the failing Playwright E2E check needs diagnosis and a successful rerun before merge.

Priority: P2
Reviewed head: 59c197ad960d6b97b2abc734f73a047cfef10b1b

Review scores

Measure	Result	What it means
Overall readiness	🦐 gold shrimp (3/6)	The focused implementation and direct browser proof are strong, but the failed Playwright job prevents a higher-confidence merge-ready rating.
Proof confidence	🦞 diamond lobster (5/6) ✨ media proof bonus	Sufficient (screenshot): The PR body includes direct after-fix browser screenshot proof and reported computed layout measurements for the affected list, loose-list, nested-list, and blockquote behavior.
Patch quality	🦐 gold shrimp (3/6)	No actionable review findings were identified.

Verification

Check	Result	Evidence
Real behavior	Verified	Sufficient (screenshot): The PR body includes direct after-fix browser screenshot proof and reported computed layout measurements for the affected list, loose-list, nested-list, and blockquote behavior.
Evidence reviewed	6 items	Current-main behavior leaves structural Markdown defaults unmirrored: Current main applies text-align: right to right-aligned Markdown, while the base Markdown rules retain padding-left: 22px for lists and a left border/padding for blockquotes; that directly explains the reported geometry defect. The branch scopes the CSS repair to the affected layout: The proposed rules use the existing user/other alignment attributes, exclude outlined messages, keep outer markers inside the message edge, retain nested inline-end indentation, and mirror blockquote padding and border. Regression coverage targets the reported DOM shapes: The added browser test sends nested unordered and ordered lists, a loose list item, and a blockquote, then checks computed list/quote styles and right-edge geometry after selecting right alignment.
Findings	None	None.
Security	None	None.

How this fits together

ClickClack’s Svelte web client renders chat message Markdown and applies per-user alignment preferences through document data attributes. The built SPA is copied into embedded web assets, which the Go server serves from the single binary.

flowchart LR
  A[Chat message Markdown] --> B[Web chat renderer]
  B --> C[Alignment preferences]
  C --> D[Message Markdown styles]
  D --> E[Browser list and quote layout]
  D --> F[Web build]
  F --> G[Embedded SPA assets]
  G --> H[Go server delivery]

Loading

Before merge

• Resolve merge risk (P1) - Existing users with non-outlined right-aligned messages will receive changed list and blockquote geometry; the failed Playwright E2E job leaves the exact browser path unconfirmed by CI until it is diagnosed and rerun.
• Complete next step (P2) - No discrete source defect was found in the proposed patch, but the failed Playwright E2E result needs human-visible diagnosis and successful validation before merge.

Agent review details

Security

None.

Review metrics

Metric	Value	Why it matters
Change surface	8 files affected: 2 source/test files and 6 generated embedded-asset files	The generated files are expected because ClickClack embeds the built SPA, while the behavioral logic remains narrowly confined to CSS and one E2E test.
Regression coverage	1 E2E test added	The test exercises nested lists, loose-list paragraphs, ordered lists, blockquotes, computed styles, and message-side geometry.

Merge-risk options

Maintainer options:

1. Validate the browser regression before merging (recommended)
   Diagnose and rerun the failed Playwright E2E job on the current head so the stored right-alignment preference is verified against the intended list and blockquote layout.
2. Pause until E2E confirmation is available
   Keep this PR open rather than accepting the visual compatibility change without a successful browser regression result.

Technical review

Best possible solution:

Land the scoped CSS and regenerated assets after the Playwright failure is resolved or shown unrelated, with the focused browser regression passing on the merge head.

Do we have a high-confidence way to reproduce the issue?

Yes, by source inspection: current main applies right text alignment but retains left-side list padding and blockquote decoration. The added E2E scenario provides a focused current behavior path, although this read-only review did not execute it.

Is this the best way to solve the issue?

Yes, conditionally: scoping the structural CSS changes to non-outlined right-aligned messages is the narrowest maintainable repair, and the E2E test covers the reported shapes. A successful rerun of the failed browser job is still needed before merge.

AGENTS.md: found, but no applicable review policy affected this item.

Codex review notes: model internal, reasoning high; reviewed against 4843afe2e8eb.

Labels

Label justifications:

• P2: This is a bounded visual rendering bug in right-aligned web-chat Markdown, with limited blast radius.
• merge-risk: 🚨 compatibility: The patch intentionally changes how existing saved right-alignment preferences render lists and blockquotes, so browser regression confirmation is needed before merge.
• rating: 🦐 gold shrimp: Overall readiness is 🦐 gold shrimp; proof is 🦞 diamond lobster and patch quality is 🦐 gold shrimp.
• status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (screenshot): The PR body includes direct after-fix browser screenshot proof and reported computed layout measurements for the affected list, loose-list, nested-list, and blockquote behavior.
• proof: sufficient: Contributor real behavior proof is sufficient. The PR body includes direct after-fix browser screenshot proof and reported computed layout measurements for the affected list, loose-list, nested-list, and blockquote behavior.
• proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The PR body includes direct after-fix browser screenshot proof and reported computed layout measurements for the affected list, loose-list, nested-list, and blockquote behavior.

Evidence

What I checked:

• Current-main behavior leaves structural Markdown defaults unmirrored: Current main applies text-align: right to right-aligned Markdown, while the base Markdown rules retain padding-left: 22px for lists and a left border/padding for blockquotes; that directly explains the reported geometry defect. (apps/web/src/styles/messages.css:868, 4843afe2e8eb)
• The branch scopes the CSS repair to the affected layout: The proposed rules use the existing user/other alignment attributes, exclude outlined messages, keep outer markers inside the message edge, retain nested inline-end indentation, and mirror blockquote padding and border. (apps/web/src/styles/messages.css:879, 59c197ad960d)
• Regression coverage targets the reported DOM shapes: The added browser test sends nested unordered and ordered lists, a loose list item, and a blockquote, then checks computed list/quote styles and right-edge geometry after selecting right alignment. (tests/e2e/chat.spec.ts:1097, 59c197ad960d)
• Embedded assets match the source change surface: The generated CSS asset contains the new scoped right-alignment selectors, and repository documentation/CI require the built web output to be embedded and reproducible. (apps/api/internal/webassets/dist/_app/immutable/assets/0._gf-j6gS.css:1, 59c197ad960d)
• Alignment feature provenance: The current alignment surface appears to originate with the appearance-preference feature commit by Shakker; subsequent recent history also shows continued work in the message-style file. (apps/web/src/styles/messages.css:832, 4e144f880bf6)
• Merge validation remains incomplete: The supplied PR check state reports all listed platform/type/build checks successful except the Playwright E2E workflow, which is failed on the current PR head; no concrete line-level cause was available from the read-only review context. (59c197ad960d)

Likely related people:

• Shakker: The appearance-preference commit introduced the alignment surface, and the subsequent local history shows repeated maintenance of the central message-style file. (role: alignment feature introducer and recent message-style contributor; confidence: medium; commits: 4e144f880bf6, aca7fac054e2; files: apps/web/src/styles/messages.css)

Rank-up moves

Optional improvements that raise the rating; they are not merge blockers.

• Diagnose and rerun the failed Playwright E2E workflow on the current PR head.
• Confirm the focused right-aligned Markdown regression passes in that successful browser run.

Rating scale

Score	Internal tier	Crab rank	Meaning
6/6	S	🦀 challenger crab	Exceptional readiness
5/6	A	🦞 diamond lobster	Very strong readiness
4/6	B	🐚 platinum hermit	Good normal PR; ordinary maintainer review
3/6	C	🦐 gold shrimp	Useful, but confidence is limited
2/6	D	🦪 silver shellfish	Proof or implementation needs work
1/6	F	🧂 unranked krab	Not merge-ready
N/A	NA	🌊 off-meta tidepool	Rating does not apply

Overall follows the weaker of proof and patch quality.
Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

Workflow

• ClawSweeper keeps one durable marker-backed review comment per issue or PR.
• Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
• A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
• PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
• Maintainers can also comment @clawsweeper review to request a fresh review only.
• Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
• Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
• Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

History

Review history (25 earlier review cycles; latest 8 shown)

• reviewed 2026-08-01T04:05:50.059Z sha 59c197a :: needs maintainer review before merge. :: none
• reviewed 2026-08-01T09:34:39.719Z sha 59c197a :: needs maintainer review before merge. :: none
• reviewed 2026-08-01T11:27:02.352Z sha 59c197a :: needs maintainer review before merge. :: none
• reviewed 2026-08-01T13:25:15.030Z sha 59c197a :: needs maintainer review before merge. :: none
• reviewed 2026-08-01T14:52:33.292Z sha 59c197a :: needs maintainer review before merge. :: none
• reviewed 2026-08-01T17:33:21.763Z sha 59c197a :: needs maintainer review before merge. :: none
• reviewed 2026-08-01T20:14:46.869Z sha 59c197a :: needs maintainer review before merge. :: none
• reviewed 2026-08-01T22:37:42.033Z sha 59c197a :: needs maintainer review before merge. :: none