From 6fa626cbd3f8f4105e8873c50341e66b2b249b5c Mon Sep 17 00:00:00 2001
From: cookesan <6601329+cookesan@users.noreply.github.com>
Date: Sun, 28 Jun 2026 07:41:17 -0400
Subject: [PATCH] fix: keep mobile copy button above code text

---
 .../markdown-extensions.test.ts               | 27 ++++++++++++-------
 .../styles/components/vp-doc.css              | 10 +++++++
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/__tests__/e2e/markdown-extensions/markdown-extensions.test.ts b/__tests__/e2e/markdown-extensions/markdown-extensions.test.ts
index 4a510a23..46a1b693 100644
--- a/__tests__/e2e/markdown-extensions/markdown-extensions.test.ts
+++ b/__tests__/e2e/markdown-extensions/markdown-extensions.test.ts
@@ -167,26 +167,35 @@ describe('Custom Containers', () => {
 })
 
 describe('Line Highlighting in Code Blocks', () => {
-  test('hidden copy button does not block code text', async () => {
+  test('copy button does not overlap mobile 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')
+    const firstLine = block.locator('code > span').first()
     await block.scrollIntoViewIfNeeded()
     const buttonBox = await button.boundingBox()
+    const firstLineBox = await firstLine.boundingBox()
     expect(buttonBox).toBeTruthy()
+    expect(firstLineBox).toBeTruthy()
+    expect(buttonBox!.y + buttonBox!.height).toBeLessThanOrEqual(
+      firstLineBox!.y
+    )
 
-    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
-      }
+    await block.hover()
+    await page.waitForFunction(
+      (el) => getComputedStyle(el).opacity === '1',
+      await button.elementHandle()
     )
 
-    expect(isCopyButtonAtPoint).toBe(false)
+    const hoveredButtonBox = await button.boundingBox()
+    const hoveredFirstLineBox = await firstLine.boundingBox()
+    expect(hoveredButtonBox).toBeTruthy()
+    expect(hoveredFirstLineBox).toBeTruthy()
+    expect(hoveredButtonBox!.y + hoveredButtonBox!.height).toBeLessThanOrEqual(
+      hoveredFirstLineBox!.y
+    )
 
     await page.setViewportSize({ width: 1280, height: 720 })
     await goto('/markdown-extensions/')
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index 56893dbd..11a39b9b 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@@ -473,6 +473,16 @@
   pointer-events: auto;
 }
 
+@media (max-width: 639px) {
+  .vp-doc [class*='language-'] pre {
+    padding-top: 64px;
+  }
+
+  .vp-doc div[class*='language-'].line-numbers-mode .line-numbers-wrapper {
+    padding-top: 64px;
+  }
+}
+
 .vp-doc [class*='language-'] > button.copy:hover,
 .vp-doc [class*='language-'] > button.copy.copied {
   border-color: var(--vp-code-copy-code-hover-border-color);