Skip to content

fix(web): simplify chat code blocks - #5301

Merged
juliusmarminge merged 4 commits into
mainfrom
t3bot/simplify-chat-code-blocks
Aug 4, 2026
Merged

fix(web): simplify chat code blocks#5301
juliusmarminge merged 4 commits into
mainfrom
t3bot/simplify-chat-code-blocks

Conversation

@t3-code

@t3-code t3-code Bot commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

problem

chat code blocks used a bordered card and a separate title strip, which felt heavier than the newer chat ui.

how this fixes it

  • removes the divider border and separate title strip
  • matches Changed Files with border-border/70 bg-secondary in light mode and border-transparent bg-input/32 in dark mode
  • keeps file and language context plus wrap and copy actions
  • preserves button labels and adds toolbar semantics for code block actions

screenshots

each view shows three code blocks.

theme before after
light before in light mode after in light mode
dark before in dark mode after in dark mode

code block vs changed files

both components now use the same background and border treatment: a subtle border-border/70 border in light mode and a transparent border in dark mode.

light dark
code block and Changed Files comparison in light mode code block and Changed Files comparison in dark mode

validation

  • pnpm --filter @t3tools/web typecheck
  • pnpm --filter @t3tools/web test -- ChatMarkdown (202 files, 1768 tests)

Note

Simplify chat code block styling in MarkdownCodeBlock

  • Moves border and background styles from index.css into Tailwind utility classes on the container div in ChatMarkdown.tsx, including dark mode variants.
  • Removes the explicit bottom border and muted background from the code block header; adjusts padding and text color to use a color-mix of foreground at 72%.
  • Adds role="toolbar" and aria-label="Code block actions" to the actions span for accessibility.
  • Corner radius is now driven by the --radius CSS variable instead of a hardcoded 0.75rem.

Macroscope summarized 917104a.

model: gpt-5.4
harness: t3bot


Note

Low Risk
Presentation-only changes to chat markdown code blocks and related CSS; no logic, data, or security impact.

Overview
Chat markdown code blocks are visually lighter: the bordered “card” and separate title strip are gone, and backgrounds now match Changed Files via bg-secondary / dark:bg-input/32 on the block in ChatMarkdown.tsx (with a light border and transparent dark border on the container).

CSS in index.css no longer sets outer/header borders and muted backgrounds on .chat-markdown-codeblock; radius uses var(--radius), header padding and title/chrome colors use a muted foreground color-mix instead of muted-foreground.

Wrap/copy controls keep their labels; the action group adds role="toolbar" and aria-label="Code block actions".

Reviewed by Cursor Bugbot for commit 917104a. Bugbot is set up for automated code reviews on this repo. Configure here.

@github-actions github-actions Bot added vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. size:S 10-29 changed lines (additions + deletions). labels Aug 3, 2026
macroscopeapp[bot]
macroscopeapp Bot previously approved these changes Aug 3, 2026
@macroscopeapp

macroscopeapp Bot commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

Approvability

Verdict: Approved 917104a

This PR makes visual styling changes to chat code blocks by moving CSS rules to Tailwind classes and simplifying the stylesheet. It also adds accessibility attributes. No runtime behavior is affected - purely visual/a11y improvements.

You can customize Macroscope's approvability policy. Learn more.

@macroscopeapp
macroscopeapp Bot dismissed their stale review August 3, 2026 22:34

Dismissing prior approval to re-evaluate 9122f4f

macroscopeapp[bot]
macroscopeapp Bot previously approved these changes Aug 3, 2026
@macroscopeapp
macroscopeapp Bot dismissed their stale review August 3, 2026 23:16

Dismissing prior approval to re-evaluate 8e24155

macroscopeapp[bot]
macroscopeapp Bot previously approved these changes Aug 3, 2026
@macroscopeapp
macroscopeapp Bot dismissed their stale review August 4, 2026 00:02

Dismissing prior approval to re-evaluate 917104a

@juliusmarminge
juliusmarminge merged commit 25ec0b9 into main Aug 4, 2026
16 checks passed
@juliusmarminge
juliusmarminge deleted the t3bot/simplify-chat-code-blocks branch August 4, 2026 11:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:S 10-29 changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant