fix: stop hidden copy button blocking code text

[cookesan]

Description

Keeps code-block copy buttons from covering selectable code text on narrow screens by reserving a small mobile action row above the code content. The copy button still becomes usable on hover or focus, and desktop code blocks keep the existing layout.

Linked Issues

Fixes #5120

Additional Context

Checks:

• pnpm -F=tests-e2e test markdown-extensions/markdown-extensions.test.ts
• pnpm check
• pnpm docs:build

[brc-dd]

Doesn't really fix the original issue. .vp-doc [class*='language-']:hover will match the case described in the issue and it will gain pointer-events even with the changes. I don't think there is any good fix for this other than to move the copy button outside.

[cookesan]

Thanks, that makes sense. I pushed 6fa626c to keep the button above the selectable code content on narrow screens instead of relying on the hidden state. The regression now checks the hover-active case too.

Local checks:

• pnpm -F=tests-e2e test markdown-extensions/markdown-extensions.test.ts
• pnpm check
• pnpm docs:build

[brc-dd]

hmm, yeah it works, but not really liking the extra space on top:

Maybe we should position the button outside the code block (like outside that background), as a regular button in the mobile view (hover is bad from the UX perspective on mobiles anyway)

Need to check how it works with code groups / titles though, especially which are longer (where a scrollbar is rendered for tabs). Don't think a padding-right can be decided for tabs without adjusting the structure. Maybe we can have better control when the title bar plugin is a part of the core.

[cookesan]

Thanks, agreed. I pushed ca9c410 to move the mobile copy button out of the code block background instead of adding top padding inside pre. The mobile rule now makes the button visible as a regular control while keeping the desktop hover behavior unchanged.

I also expanded the e2e coverage for:

• plain code blocks
• code inside custom containers
• code groups with a long scrollable tab row

Checks:

• pnpm -F=tests-e2e test markdown-extensions/markdown-extensions.test.ts
• pnpm check
• pnpm docs:build