microsoft / microsoft/vscode

Markdown preview: code block copy button scrolls with content on horizontal overflow

Open
#329,805 3 comments 0 reactions 1 assignee Claimed by @hediet View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.