fix(client): improve markdown content spacing

[wtfsayo]

This PR includes two fixes for markdown content spacing in the client:

1. Add missing heading and separator spacing to markdown-content
2. Reduce blockquote vertical spacing for more compact display

These changes improve the visual consistency and readability of markdown content rendered in the client.

---

Note

Adds consistent styles and spacing for markdown headings, separators, blockquotes, and code (blocks/inline) in packages/client/src/index.css.

• Client CSS (packages/client/src/index.css):
  • Markdown headings (h1–h6): add consistent sizes, weights, line-heights, margins, and first-child top-margin removal.
  • Separators: style hr with uniform spacing and subtle border.
  • Blockquotes: add compact margins, padding, left border, color, italic text, and tighter paragraph spacing.
  • Code styling:
    • pre: add margins, padding, rounded corners, overflow handling, and background.
    • code: set monospace font and size; add inline code background, padding, and radius.

^{Written by Cursor Bugbot for commit a70e5b8. This will update automatically on new commits. Configure here.}

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

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

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/client-markdown-spacing

---

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

[graphite-app]

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• merge-queue - adds this PR to the back of the merge queue
• merge-queue-hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

[claude]

Claude finished @wtfsayo's task —— View job

---

PR Review: Markdown Content Spacing Fixes

Todo List:

• Read and analyze the CSS changes in packages/client/src/index.css
• Check for code quality and best practices
• Verify alignment with project standards
• Provide review feedback

---

Review Summary

This PR adds comprehensive CSS styling for markdown content rendering in the ElizaOS client. The changes look well-structured and improve the visual consistency of markdown elements.

Analysis

✅ APPROVED - No critical issues found

Review Notes:

💡 SUGGESTION: Line 188 - Hard-coded color value → Consider: Use CSS custom property instead of #f5f5f5 for better theme consistency

/* Instead of: */
color: #f5f5f5;
/* Consider: */
color: hsl(var(--foreground));

💡 SUGGESTION: Lines 276, 288, 299, 310, 321, 333 - Hard-coded white colors → Consider: Use CSS custom properties for better theme integration

/* Instead of: */
color: #ffffff;
/* Consider: */
color: hsl(var(--foreground));

💡 SUGGESTION: Lines 350, 357 - Hard-coded RGBA values → Consider: Use CSS custom properties with opacity for better maintainability

/* Instead of: */
border-top: 1px solid rgba(255, 255, 255, 0.15);
/* Consider: */
border-top: 1px solid hsl(var(--border));

Positive Aspects:

• Well-organized CSS structure following existing patterns
• Comprehensive coverage of all markdown elements
• Consistent spacing and typography hierarchy
• Good use of !important for overriding framework styles (appropriate for this use case)
• Proper handling of edge cases (first-child, last-child selectors)
• Maintains dark theme compatibility

Code Quality:

• Clean, readable CSS structure
• Consistent naming conventions
• Appropriate use of CSS layers (@layer components)
• Good documentation with comments

The changes effectively address the stated goals of improving markdown content spacing and readability without introducing any security concerns or breaking changes.

---

[cursor]

Bug: First-child selector matches all headings due to wrapper divs

The :first-child selectors for headings (.markdown-content h1:first-child, etc.) likely won't work as intended. The existing CSS on lines 192-195 reveals that Streamdown wraps elements in divs, using display: contents to collapse them visually. However, :first-child evaluates DOM structure, not visual layout. If each block element is wrapped in its own div, every heading becomes a "first-child" of its wrapper, causing all headings (not just the first in the content) to have margin-top: 0 applied.