fix markdown styling

[iceljc]

No description provided.

[qodo-code-review]

PR Summary by Qodo

Fix markdown rendering and list/heading styling across chat and agent views

🐞 Bug fix ✨ Enhancement 🕐 20-40 Minutes

AI Description

• Enable consistent hard line breaks in rendered markdown.
• Restore list markers/padding and bold styling under Tailwind Preflight resets.
• Add scoped markdown typography for chat bot bubbles and agent headings.

Diagram

graph TD
  A["Chat bubble (rcm-body)"] --> B["Markdown.svelte"] --> C{{"marked"}}
  D["Agent page styles"] --> E["_agent.scss"] --> B
  F["Chat page styles"] --> G["_chat.scss"] --> B
  H["App layout"] --> I["+layout.svelte"] --> J{{"Fontsource (700)"}}

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Adopt Tailwind Typography (@tailwindcss/typography) for markdown

• ➕ Standardized, well-tested markdown typographic defaults (lists, headings, spacing)
• ➕ Reduces custom CSS maintenance across surfaces
• ➖ May require significant theme overrides to match existing chat/agent styling
• ➖ Adds dependency and potentially changes typography in unexpected places

2. Adjust Tailwind Preflight/base layer rules globally for lists

• ➕ Fixes list markers once for the entire app
• ➕ Avoids per-surface overrides
• ➖ High risk of regressions in non-markdown UI that relies on list reset
• ➖ Harder to reason about downstream style impacts

3. Centralize all markdown typography in Markdown.svelte only

• ➕ Single source of truth for markdown appearance
• ➕ Less divergence between chat/agent renderings
• ➖ Harder to support intentionally different markdown themes per surface (e.g., chat bubble vs. page content)
• ➖ May force compromises that don’t fit all call sites

Recommendation: The PR’s scoped approach is appropriate: restore core markdown semantics (breaks, list markers) in Markdown.svelte while keeping surface-specific spacing/heading scale in _chat.scss and avoiding global CSS fallout. Consider Tailwind Typography only if markdown becomes a primary content format across many screens; otherwise keep these targeted overrides.

Files changed (4) +69 / -3

Enhancement (1) +53 / -0

_chat.scssAdd chat-bubble markdown theme for spacing, headings, and lists +53/-0

Add chat-bubble markdown theme for spacing, headings, and lists

• Introduces scoped markdown typography under ".rcm-body .markdown-container" to restore paragraph spacing, set a modest heading scale, and normalize list indentation and list-item spacing inside bot responses.

src/lib/styles/pages/_chat.scss

Bug fix (2) +15 / -3

Markdown.sveltePreserve line breaks and restore semantic markdown list/bold styles +14/-2

Preserve line breaks and restore semantic markdown list/bold styles

• Configures marked to use break-preserving behavior for raw text rendering. Adds scoped CSS to counter Tailwind Preflight list resets by restoring ul/ol markers and left padding, and ensures strong text uses an explicit bold weight.

src/lib/common/markdown/Markdown.svelte

_agent.scssScope agent h1 styling to .node to avoid global overrides +1/-1

Scope agent h1 styling to .node to avoid global overrides

• Narrows the h1 selector to ".node h1" so the reduced heading scale only applies in node contexts, reducing unintended styling bleed into other markdown headings.

src/lib/styles/pages/_agent.scss

Other (1) +1 / -0

+layout.svelteImport bold Libre Baskerville font weight +1/-0

Import bold Libre Baskerville font weight

• Adds the 700-weight Libre Baskerville font import so bold text (e.g., strong/heading emphasis) renders with the intended weight across markdown content.

src/routes/+layout.svelte

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review