Markdown editor: Short fenced code blocks reserve space for hidden fence lines
- Dominant language
- TypeScript
- Stars
- 193k
- Forks
- 42.4k
- PR merge metrics
- PR metrics pending
Description
## Description
Short fenced code blocks occupy substantially more vertical space than their rendered content in the experimental Markdown editor. A two-line snippet appears as a roughly six-line-tall box, reducing scanning density in documents with several small examples.
## Reproduction
1. Open the experimental Markdown editor fixture at `http://localhost:5178/?theme=vscode-default` in a 1280 × 800 CSS-pixel viewport.
2. Set the document to:
```markdown
Before
```ts
const x = 1;
const y = 2;
```
After
```
3. Leave the fenced block inactive so that the Markdown fence markers are hidden.
4. Inspect the `.md-code-block` box and its children.
The same visual result can be seen by opening this content with **Markdown Editor (Experimental)** and leaving the block inactive.
## Expected
An inactive two-line snippet has compact, proportionate spacing around its two visible lines. Activating the block may reveal the fences, but the inactive presentation should not permanently look as tall as a four-line source block.
## Actual
At the tested viewport and default VS Code Markdown theme:
- `.md-code-block` is **900 × 109.97 px**.
- Its two visible code lines occupy approximately **35.49 px**.
- Computed block styling is `padding: 16px`, `border: 1px`, and `line-height: 18.998px`; there is no `min-height`.
- After subtracting padding and border, the content box is approximately **75.97 px**, or four line boxes, even though only two code lines are visible.
## Root Cause
**Confirmed:** inactive opening and closing fences remain in inline layout. In `packages/markdown-editor/src/view/editor.css`, `.md-marker-openFence.md-marker-hidden` and `.md-marker-closeFence.md-marker-hidden` override the general hidden-marker rule with `display: inline; visibility: hidden`. The accompanying comment says this intentionally keeps active and inactive code-block heights identical. Computed styles and DOM inspection confirm both hidden fence spans retain layout boxes.
The VS Code default theme also adds 16 px of padding on every side in `packages/markdown-editor/src/view/themes/vscode-default.css`. The issue is not caused by a minimum height.
## Additional Context
This is related to the general layout-stability goal in #327538, but the fenced-block case has the opposite usability cost: preventing activation shift by reserving both invisible fence lines makes every inactive short snippet unnecessarily tall. A solution should preserve stable interaction where possible without requiring inactive blocks to reserve full visible-source height.
Contributor guide
Assessment
This issue has not been assessed yet.