From 20453451d869316c03b9e16b1af9a91cd10f25c6 Mon Sep 17 00:00:00 2001
From: cookesan <6601329+cookesan@users.noreply.github.com>
Date: Sun, 28 Jun 2026 07:15:11 -0400
Subject: [PATCH] fix: stop hidden copy button blocking code text

---
 .../markdown-extensions.test.ts               | 39 +++++++++++++++++++
 .../styles/components/vp-doc.css              |  2 +
 2 files changed, 41 insertions(+)

diff --git a/__tests__/e2e/markdown-extensions/markdown-extensions.test.ts b/__tests__/e2e/markdown-extensions/markdown-extensions.test.ts
index 839f953c..4a510a23 100644
--- a/__tests__/e2e/markdown-extensions/markdown-extensions.test.ts
+++ b/__tests__/e2e/markdown-extensions/markdown-extensions.test.ts
@@ -167,6 +167,45 @@ describe('Custom Containers', () => {
 })
 
 describe('Line Highlighting in Code Blocks', () => {
+  test('hidden copy button does not block code text', async () => {
+    await page.setViewportSize({ width: 390, height: 844 })
+    await goto('/markdown-extensions/')
+
+    const block = page.locator('#single-line + div')
+    const button = block.locator('> button.copy')
+    await block.scrollIntoViewIfNeeded()
+    const buttonBox = await button.boundingBox()
+    expect(buttonBox).toBeTruthy()
+
+    const isCopyButtonAtPoint = await page.evaluate(
+      ({ x, y }) =>
+        document.elementFromPoint(x, y)?.matches('button.copy') ?? false,
+      {
+        x: buttonBox!.x + buttonBox!.width / 2,
+        y: buttonBox!.y + buttonBox!.height / 2
+      }
+    )
+
+    expect(isCopyButtonAtPoint).toBe(false)
+
+    await page.setViewportSize({ width: 1280, height: 720 })
+    await goto('/markdown-extensions/')
+    const desktopBlock = page.locator('#single-line + div')
+    const desktopButton = desktopBlock.locator('> button.copy')
+
+    await desktopBlock.hover()
+    await page.waitForFunction(
+      (el) => getComputedStyle(el).opacity === '1',
+      await desktopButton.elementHandle()
+    )
+    expect(
+      await desktopButton.evaluate((el) => getComputedStyle(el).opacity)
+    ).toBe('1')
+    expect(
+      await desktopButton.evaluate((el) => getComputedStyle(el).pointerEvents)
+    ).toBe('auto')
+  })
+
   test('single line', async () => {
     const classList = await getClassList(
       page.locator('#single-line + div code > span').nth(3)
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index 904427fc..56893dbd 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@@ -455,6 +455,7 @@
   height: 40px;
   background-color: var(--vp-code-copy-code-bg);
   opacity: 0;
+  pointer-events: none;
   cursor: pointer;
   background-image: var(--vp-icon-copy);
   background-position: 50%;
@@ -469,6 +470,7 @@
 .vp-doc [class*='language-']:hover > button.copy,
 .vp-doc [class*='language-'] > button.copy:focus {
   opacity: 1;
+  pointer-events: auto;
 }
 
 .vp-doc [class*='language-'] > button.copy:hover,