Markdown preview: code block copy button scrolls with content on horizontal overflow
- Dominant language
- TypeScript
- Stars
- 193k
- Forks
- 42.4k
- PR merge metrics
- PR metrics pending
Description
Does this issue occur when all extensions are disabled?: Yes (this is a built-in extension — `markdown-language-features`)
- VS Code Version: 1.101.0
- OS Version: Windows 11
**Steps to Reproduce:**
1. Open any `.md` file in the built-in Markdown preview (`Ctrl+Shift+V`).
2. Ensure the file contains a fenced code block with at least one line long enough to trigger horizontal scrolling inside the block.
3. Hover over the code block — the copy button appears at the top-right corner of the block ✅
4. Scroll the code block **horizontally to the right**.
**Expected:**
The copy button stays pinned to the **top-right corner** of the visible code block area at all times.
**Actual:**
The copy button scrolls along with the content. As you scroll right, the button moves left/into the middle of the visible area instead of remaining at the right edge.
**Root Cause:**
Introduced by PR #322274 (referenced in #322269). In `extensions/markdown-language-features/media/markdown.css`:
```css
/* The pre element */
pre {
position: relative;
overflow: auto; /* creates a scroll container */
}
/* The copy button */
.code-block-copy-button {
position: absolute;
top: 8px;
right: 8px; /* anchored to scroll content area, not the visible viewport edge */
}
```
When `pre` has `overflow: auto` and its content is wider than the visible area, a `position: absolute; right: 8px` child is anchored relative to the scroll content box (which can be wider than the viewport), causing the button to scroll with the content.
**Suggested Fix:**
```css
.code-block-copy-button {
position: sticky;
float: right;
top: 8px;
right: 8px;
/* remove position: absolute */
}
```
Contributor guide
Assessment
This issue has not been assessed yet.