fix(web): harmonize typography in chat messages and code blocks

[jvzijp]

What Changed

• Replaced arbitrary font sizes (text-[10px], text-[11px]) with Tailwind's standard text-xs class for timestamps and work-entry labels.
• Increased timestamp/meta opacity from text-muted-foreground/30 to text-muted-foreground/50 so they're easier to read.
• Changed user message body from <pre> (monospace) to <div>, removing monospace styling on plain user input.
• Reduced inline code font size from 0.875rem to 0.75rem so inline code doesn't appear larger
  than surrounding prose.
• Added leading-snug to markdown code blocks for tighter line spacing.

Why

Chat typography used a mix of ad-hoc pixel sizes (10px, 11px, 0.875rem) and inconsistent opacity values, making the UI feel unpolished and harder to maintain. Standardizing on Tailwind's type scale (text-xs = 12px) and bumping the timestamp opacity improves readability without changing the visual hierarchy. Switching user messages from <pre> to <div> changes previous behavior where plain text was rendered in a monospace font, which looked out of place compared to the rest of the UI.

UI Changes

• Timestamps and work-entry labels are slightly larger and more readable (10–11px → 12px, 30% → 50% opacity).
• User messages now render in the default proportional font instead of monospace.
• Inline code in markdown is slightly smaller to sit better within body text.
• Code blocks have tighter line height.

Before

After

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes (N/A)

---

Note

Low Risk
Low risk visual-only changes to chat typography and wrappers; main risk is minor layout/whitespace regressions in message rendering across browsers.

Overview
Standardizes chat UI typography by switching timestamp/meta/work-entry text to Tailwind text-xs and increasing muted text opacity for better readability.

Adjusts message rendering styles: user message bodies no longer use a <pre>/font-mono wrapper (while preserving whitespace via CSS), and markdown code presentation is tightened by adding leading-snug to code blocks and reducing pre code font size to 0.75rem.

^{Reviewed by Cursor Bugbot for commit 8896a18. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Harmonize typography in chat messages and code blocks

• User message text in MessagesTimeline.tsx no longer uses a monospace font; plain text messages now render in a <div> instead of <pre>, preserving whitespace via whitespace-pre-wrap.
• Timestamps switch from text-[10px]/opacity-30 to text-xs/opacity-50, and work entry lines move from a fixed 11px to text-xs.
• Code blocks in ChatMarkdown.tsx gain leading-snug, and index.css reduces inline code font size from 0.875rem to 0.75rem and removes the explicit line-height.
• Behavioral Change: removing font-mono from user messages changes the visual appearance of all user-sent text.

^{Macroscope summarized 8896a18.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: e58331df-55b1-4fe9-a981-56c1250feb78

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 6a99b8d. Configure here.}

[macroscopeapp]

Approvability

Verdict: Approved

Purely visual changes adjusting typography (font sizes, line heights, opacity) in chat messages and code blocks. No runtime behavior or logic is affected.

^{You can customize Macroscope's approvability policy. Learn more.}