feat: render responsive Markdown tables

[jjjhenriksen]

Summary

• render Markdown tables inside a dedicated horizontal-scroll wrapper
• preserve native table layout and GFM column alignment
• keep wide tables contained within the message surface on narrow screens
• expose overflowing tables as named, keyboard-focusable regions
• regenerate the checked-in embedded webassets

Why

Wide Markdown tables could overflow the message layout. Applying scrolling directly to the table also changes it from native table layout, which can break grid sizing. The wrapper provides overflow containment while the table remains display: table.

Real behavior proof

Verified inside the actual authenticated ClickClack app at a 480 x 720 viewport. The proof flow opened /app, loaded the bootstrapped #general channel, sent a wide aligned Markdown table through the real message composer, located the resulting non-pending message row, and horizontally scrolled that row's table.

Observation	Result
Page identity	title ClickClack, heading #general, routed channel URL
Message path	sent through the real Message body composer and Send button
Rendered surface	visible .message-row:not(.is-pending) inside the ClickClack timeline
Scroll wrapper width	clientWidth = 404px
Wide content width	scrollWidth = 671px
Wrapper overflow	overflow-x: auto
Accessible region	role="region", aria-label="Scrollable Markdown table", tabindex="0"
Table layout	display: table, width 671.453px
GFM column alignment	left / center / right preserved
Horizontal interaction	scrollLeft: 0 -> 260
Keyboard interaction	focus region, press ArrowRight, observe scrollLeft > 0
Framework overlay	none
Browser console	0 warnings, 0 errors

Before horizontal scroll, inside ClickClack:

After horizontal scroll, inside ClickClack:

Validation

• pnpm check
• pnpm build
• pnpm exec playwright test - 99 passed
• focused real-app test: CLICKCLACK_E2E_PORT=18194 pnpm exec playwright test tests/e2e/markdown-table.spec.ts - 1 passed
• repeatability gate: git diff --exit-code -- apps/api/internal/webassets/dist
• Autoreview: clean, no actionable findings, patch is correct (0.97)
• ClawSweeper final exact-head pass: no findings, security cleared, proof sufficient (Tier A), patch is correct (0.94)

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[clawsweeper]

Codex review: needs maintainer review before merge. Reviewed July 17, 2026, 2:24 AM ET / 06:24 UTC.

Summary
The PR wraps rendered GFM tables in a keyboard-focusable horizontal scroller, adds native-table styling, regenerates embedded web assets, adds before-and-after proof images, and adds an authenticated Playwright test.

Reproducibility: not applicable. as a bug-report gate; the PR nevertheless provides a high-confidence authenticated app flow demonstrating wide-table overflow and the improved result.

Review metrics: 3 noteworthy metrics.

• Changed surface: 16 files, 131 additions, 24 deletions. The authored behavior is concentrated in two source files and one test; most other paths are regenerated assets or proof images.
• Behavior coverage: 1 authenticated E2E test added. The test exercises the real composer, rendered message row, overflow dimensions, focus, and keyboard scrolling.
• CI result: 7 of 7 checks passed. The exact reviewed head is green across frontend, backend, desktop, E2E, and container lanes.

Merge readiness
Overall: 🦞 diamond lobster
Proof: 🦞 diamond lobster ✨ media proof bonus
Patch quality: 🦞 diamond lobster
Result: ready for maintainer review.

Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch.

Next step before merge

• No automated repair is needed; maintainers can review and merge the exact green head through the normal PR path.

Security
Cleared: The patch changes sanitized Markdown rendering, CSS, first-party generated assets, proof media, and tests without adding dependencies, permissions, secrets handling, downloads, or external code execution.

Review details

Best possible solution:

Merge the exact green head so Markdown tables retain native layout and alignment while wide content remains contained, keyboard reachable, and covered by the authenticated app-flow test.

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

Not applicable as a bug-report gate; the PR nevertheless provides a high-confidence authenticated app flow demonstrating wide-table overflow and the improved result.

Is this the best way to solve the issue?

Yes. A dedicated overflow wrapper preserves native table layout and GFM alignment more safely than changing the table itself into a block scroller, and the patch validates that behavior end to end.

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

Codex review notes: model internal, reasoning high; reviewed against 064a46fc73e1.

Label changes

Label justifications:

• P2: This is a bounded user-facing rendering and accessibility improvement with limited blast radius and complete proof.
• rating: 🦞 diamond lobster: Overall readiness is 🦞 diamond lobster; proof is 🦞 diamond lobster and patch quality is 🦞 diamond lobster.
• status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (screenshot): Authenticated ClickClack before-and-after screenshots and measured live DOM behavior show the wide table contained and horizontally scrollable with preserved alignment and keyboard interaction.
• proof: sufficient: Contributor real behavior proof is sufficient. Authenticated ClickClack before-and-after screenshots and measured live DOM behavior show the wide table contained and horizontally scrollable with preserved alignment and keyboard interaction.
• proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. Authenticated ClickClack before-and-after screenshots and measured live DOM behavior show the wide table contained and horizontally scrollable with preserved alignment and keyboard interaction.

Evidence reviewed

What I checked:

• Renderer change: The Marked table renderer wraps sanitized GFM tables in a named horizontal-scroll region while retaining the renderer's native table output. (apps/web/src/lib/format.ts:4, fa6ab55424e3)
• Responsive styling: The wrapper contains horizontal overflow while the table retains native table display, GFM alignment, full-width minimum sizing, borders, and existing design tokens. (apps/web/src/styles/messages.css:1262, fa6ab55424e3)
• Real-app regression coverage: The Playwright test creates an isolated workspace and channel, sends a wide table through the real composer, verifies overflow, focuses the region, and confirms keyboard scrolling. (tests/e2e/markdown-table.spec.ts:5, fa6ab55424e3)
• Exact-head validation: All seven reported GitHub checks succeeded, including TypeScript, Playwright E2E, Go, desktop-platform, Docker-image, and build validation. (fa6ab55424e3)
• Review continuity: Five completed ClawSweeper review cycles through the current head reported no findings; the latest assessment found sufficient proof and a correct patch. (fa6ab55424e3)
• Current-main necessity: The supplied current-main state does not contain the wrapper, styling, or focused regression test introduced by this still-open cleanly mergeable PR. (apps/web/src/lib/format.ts:1, 064a46fc73e1)

Likely related people:

• jjjhenriksen: Prior released OpenClaw history credits this contributor for ClickClack delivery work, providing relevant domain familiarity beyond this proposal. citeturn11search0turn11search1. (role: adjacent ClickClack feature contributor; confidence: medium; commits: fa6ab55424e3; files: apps/web/src/lib/format.ts, apps/web/src/styles/messages.css, tests/e2e/markdown-table.spec.ts)

What the crustacean ranks mean

• 🦀 challenger crab: rare, exceptional readiness with strong proof, clean implementation, and convincing validation.
• 🦞 diamond lobster: very strong readiness with only minor maintainer review expected.
• 🐚 platinum hermit: good normal PR, likely mergeable with ordinary maintainer review.
• 🦐 gold shrimp: useful signal, but proof or patch confidence is still limited.
• 🦪 silver shellfish: thin signal; proof, validation, or implementation needs work.
• 🧂 unranked krab: not merge-ready because proof is missing/unusable or there are serious correctness or safety concerns.
• 🌊 off-meta tidepool: rating does not apply to this item.

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.

How this review workflow works

• 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.

Review history (5 earlier review cycles)

• reviewed 2026-07-17T04:47:43.343Z sha eb39fa2 :: needs maintainer review before merge. :: none
• reviewed 2026-07-17T05:00:25.274Z sha 869f978 :: needs maintainer review before merge. :: none
• reviewed 2026-07-17T05:08:42.487Z sha 90b0a94 :: needs maintainer review before merge. :: none
• reviewed 2026-07-17T05:31:51.222Z sha a9916d4 :: needs maintainer review before merge. :: none
• reviewed 2026-07-17T05:42:40.585Z sha fa6ab55 :: needs maintainer review before merge. :: none

[clawsweeper]

ClawSweeper status: review started.

I am starting a fresh review of this pull request: feat: render responsive Markdown tables This is item 1/1 in the current shard. Shard 0/1.

This placeholder means the worker is alive and reading the current context. I will edit this same comment with the actual review when the claws are done clicking.

Crustacean status: shell secured, claws on keyboard, evidence pebbles being sorted.