T-XGF1-markdown-styling-pass
State: planning/proposed · Impact: medium · Complexity: small
Rendered markdown carries a visible line under every H1 that no first-party rule in this repo draws, and heading/list/code spacing has never had a deliberate pass. This task finds the underline’s real owner and sets one clean, Obsidian-like default in the two places that carry heading style: the reading-mode CSS and its live-editor twin.
| Location | Role today |
|---|---|
packages/ts/markdown-ui/app/assets/css/markdown-ui.css | Reading-mode heading, list and hr rules (~100-137): h1-h4 share weight and line-height, sizes 1.55/1.3/1.12em/inherit; no rule draws an underline |
packages/ts/obsidian-editor/src/theme.ts | Live editor’s own heading sizes (.cm-h1-.cm-h6, ~13-30), the “live twin” of the reading CSS |
packages/ts/obsidian-md/src/theme.css | --obsmd-* variable contract only; no heading-specific rule |
packages/ts/markdown-ui/playground/ | Nuxt app serving fixture notes (e.g. vault/render-text.md) for before/after screenshots |
Proposed
Section titled “Proposed”The H1 underline’s actual source is identified — no rule in markdown-ui.css, theme.ts or
theme.css currently draws one, so the leading suspect is a host’s own prose/typography default
bleeding through .obsidian-md — and removed or overridden at the layer that owns it.
markdown-ui.css:120-137 and theme.ts:24-30 set one deliberate heading scale, weight and
spacing, kept proportionally matched between reading and live mode; no rule remains under
headings; list and code-block spacing is tightened to match. Before and after screenshots exist
on the playground, light and dark.
Approach
Section titled “Approach”- Run the playground (or the app) and inspect a rendered H1 with devtools to find the actual CSS rule drawing the underline.
- Add the counter-rule, or remove the offending default, at the layer that owns it; if it is a
host default bleeding through
.obsidian-md, scope a reset inmarkdown-ui.css. - Revise the heading scale, weight and margins in
markdown-ui.css:120-137and the matching live-editor sizes intheme.ts:24-30so both stay twins. - Tighten list and code-block spacing to match, extending the pattern the existing
.md-reading .obsidian-mdrules already use. - Capture before/after screenshots on the playground, light and dark, per S-0012-human-reviewable-ui-changes, and hand them to T-I7N0-agent-manager-screenshots-docs-ledger’s contact sheet.
| Area | Note |
|---|---|
packages/ts/markdown-ui/app/assets/css/markdown-ui.css | Heading scale/weight/spacing; remove or override the underline source if it lives here |
packages/ts/obsidian-editor/src/theme.ts | Match the live editor’s heading sizes to the reading-mode twin |
packages/ts/markdown-ui/playground/vault/render-text.md | Exercise every heading level for the screenshot |
Acceptance criteria
Section titled “Acceptance criteria”- AC-1: No visible line renders under an H1 in the playground or the app; a Playwright
screenshot test on
render-text.mdcatches a regression. - AC-2:
markdown-ui.css’s heading rules andtheme.ts’s.cm-h1-.cm-h6sizes stay proportionally matched, documented by a code comment tying the two. - AC-3: Before/after screenshots, light and dark, exist under the playground’s screenshot output and are cited from T-I7N0-agent-manager-screenshots-docs-ledger’s contact sheet.
Out of scope
Section titled “Out of scope”- The
--obsmd-*variable contract inpackages/ts/obsidian-md/src/theme.css; this task consumes those variables, it does not add or rename any. - Table and mermaid-specific styling (T-U81R-table-cell-editing-and-hover-controls, T-0B4X-mermaid-edit-with-preview).
Dependencies
Section titled “Dependencies”- none
Discovery context
Section titled “Discovery context”From the user’s Agent Manager planning request (2026-09-07): the stray H1 underline was named directly as a symptom to chase down, alongside tables, vim and mermaid, in M-BMFD’s Stage 6.