chore: improve markdown spacing#766
Merged
Merged
Conversation
- Bump header sizes: h1 text-xl, h2 text-lg, h3 text-base (was text-lg/text-base/inherit) - Add explicit leading to headers for consistent vertical rhythm - Replace flat my-* spacing with sibling-aware margins (element+element) - Headers get extra top margin for visual section breaks - Content after headers gets tighter spacing to group with heading - All three variants (tight/compact/default) updated proportionally
Strategy 4: define spacing for pairs of adjacent element types rather than a flat owl. Each heavy/visual element (blockquote, code block, table) gets symmetric breathing room above and below. hr gets the largest gap as a clear section divider. Tight mode spacing hierarchy: - Base (p+p, list+p): mt-2.5 (10px) - Blockquote/code/table: mt-3.5 (14px) - hr: mt-4 (16px) - Headings: mt-3 to mt-4 (unchanged) Also: - data-code-block attr on MarkdownCodeBlock for CSS targeting - data-table-block attr on table wrapper - Internal blockquote owl spacing for multi-paragraph quotes - Refactored className to array.join() for readability
Lists that follow a paragraph should feel 'related' to their intro text. Pull them closer than the base owl gap: - tight: mt-1.5 (6px) vs base mt-2.5 (10px) - compact: mt-2 (8px) vs base mt-3 (12px) - default: mt-3 (12px) vs base mt-4 (16px) Also targets div+ul/div+ol since the p component sometimes renders as a div (when it contains block media).
Heading size already communicates hierarchy — extra whitespace for larger headings was redundant in a chat context. All variants now use flat values: - tight: push mt-2.5, pull mt-0.5 - compact: push mt-3, pull mt-0.5 - default: push mt-3.5, pull mt-0.5 Also fixes invalid mt-4.5 value in default variant (now mt-4 for hr).
tellaho
changed the title
tellaho
changed the title
wesbillman
approved these changes
May 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Category: improvement
User Impact: Message content now has consistent, cohesive vertical rhythm — headings, lists, blockquotes, code blocks, and tables all breathe naturally without jarring gaps or cramped runs.
Problem: Markdown spacing used a flat margin for all elements (
my-0.5/my-1.5/my-3), which meant headings, code blocks, and dividers all got the same gap regardless of their visual weight. This created either too-tight or too-loose spacing depending on the element pair.Solution: Replaced the single-rule approach with an axiomatic "lobotomized owl" (
* + *) strategy — a base rhythm with contextual overrides for specific element pairs. Headings get a flat push/pull regardless of level (font size does the hierarchy work), block-level elements (code, blockquotes, tables) breathe more, and lists after paragraphs tuck in tighter to feel related.File changes
desktop/src/shared/ui/markdown.tsx
Rewrote the spacing system across all three density variants (tight, compact, default). Added
data-code-blockanddata-table-blockattributes for CSS targeting. Bumped heading font sizes one step up (h1→xl, h2→lg, h3→base) with explicit leading values. Added internal blockquote spacing reset. All spacing now uses owl-based[&>*+*]selectors with contextual pair overrides.How to verify
Screenshots
Headings + paragraphs:
Lists:
Blockquote + code block:
hr divider + table:
