fix: move mobile copy button outside code block

__tests__/e2e/markdown-extensions/index.md

@@ -169,7 +169,7 @@ export default config
 
 <<< @/markdown-extensions/foo.md
 
-<<< @/markdown-extensions/foo.md#snippet{1 ts:line-numbers} [snippet with region]
+<<< @/markdown-extensions/foo.md#snippet{1 ts:line-numbers} [snippet with region and a long mobile tab label]
 
 :::
 

__tests__/e2e/markdown-extensions/markdown-extensions.test.ts

@@ -7,6 +7,30 @@ const getClassList = async (locator: Locator) => {
 
 const trim = (str?: string | null) => str?.replace(/\u200B/g, '').trim()
 
+const expectMobileCopyButtonOutsideCode = async (
+  block: Locator,
+  limit?: Locator
+) => {
+  const button = block.locator('> button.copy')
+  const firstLine = block.locator('code > span').first()
+  await block.scrollIntoViewIfNeeded()
+
+  const [buttonBox, firstLineBox, limitBox] = await Promise.all([
+    button.boundingBox(),
+    firstLine.boundingBox(),
+    (limit ?? block).boundingBox()
+  ])
+  expect(buttonBox).toBeTruthy()
+  expect(firstLineBox).toBeTruthy()
+  expect(limitBox).toBeTruthy()
+  expect(buttonBox!.y + buttonBox!.height).toBeLessThanOrEqual(limitBox!.y)
+  expect(buttonBox!.y + buttonBox!.height).toBeLessThanOrEqual(firstLineBox!.y)
+  expect(await button.evaluate((el) => getComputedStyle(el).opacity)).toBe('1')
+  expect(
+    await button.evaluate((el) => getComputedStyle(el).pointerEvents)
+  ).toBe('auto')
+}
+
 beforeEach(async () => {
   await goto('/markdown-extensions/')
 })
@@ -164,6 +188,17 @@ describe('Custom Containers', () => {
       'Click me to view the code'
     )
   })
+
+  test('copy button stays outside mobile custom container code', async () => {
+    await page.setViewportSize({ width: 390, height: 844 })
+    await goto('/markdown-extensions/')
+
+    const block = page.locator('#custom-title ~ .custom-block').nth(1)
+    await block.locator('summary').click()
+    await expectMobileCopyButtonOutsideCode(
+      block.locator('div[class*="language-"]')
+    )
+  })
 })
 
 describe('Line Highlighting in Code Blocks', () => {
@@ -172,30 +207,10 @@ describe('Line Highlighting in Code Blocks', () => {
     await goto('/markdown-extensions/')
 
     const block = page.locator('#single-line + div')
-    const button = block.locator('> button.copy')
+    await expectMobileCopyButtonOutsideCode(block)
-    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
-    )
 
     await block.hover()
-    await page.waitForFunction(
+    await expectMobileCopyButtonOutsideCode(block)
-      (el) => getComputedStyle(el).opacity === '1',
-      await button.elementHandle()
-    )
-
-    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/')
@@ -307,7 +322,10 @@ describe('Code Groups', () => {
 
     // tabs
     const labels = div.locator('.tabs > label')
-    const labelNames = ['foo.md', 'snippet with region']
+    const labelNames = [
+      'foo.md',
+      'snippet with region and a long mobile tab label'
+    ]
     const count = await labels.count()
     expect(count).toBe(2)
     for (let i = 0; i < count; i++) {
@@ -325,6 +343,19 @@ describe('Code Groups', () => {
       await getClassList(blocks.nth(1).locator('code > span').nth(0))
     ).toContain('highlighted')
   })
+
+  test('copy button stays outside mobile code group tabs', async () => {
+    await page.setViewportSize({ width: 390, height: 844 })
+    await goto('/markdown-extensions/')
+
+    const div = page.locator('#with-other-features-1 + div')
+    await div.scrollIntoViewIfNeeded()
+    await div.locator('.tabs > label').nth(1).click()
+    await expectMobileCopyButtonOutsideCode(
+      div.locator('.blocks > div.active'),
+      div.locator('> .tabs')
+    )
+  })
 })
 
 describe('Markdown File Inclusion', () => {

src/client/theme-default/styles/components/vp-doc.css

@@ -474,12 +474,47 @@
 }
 
 @media (max-width: 639px) {
-  .vp-doc [class*='language-'] pre {
+  .vp-doc div[class*='language-'] {
-    padding-top: 64px;
+    margin-top: 64px;
+    overflow: visible;
+  }
+
+  .vp-doc div[class*='language-'] + div[class*='language-'],
+  .vp-doc div[class$='-api'] + div[class*='language-'],
+  .vp-doc
+    div[class*='language-']
+    + div[class$='-api']
+    > div[class*='language-'] {
+    margin-top: 64px;
+  }
+
+  .vp-doc .custom-block div[class*='language-'] {
+    margin-top: 64px !important;
+  }
+
+  .vp-doc [class*='language-'] > button.copy {
+    top: -48px;
+    /*rtl:ignore*/
+    right: 0;
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .vp-doc .vp-code-group {
+    margin-top: 64px;
+  }
+
+  .vp-doc .custom-block .vp-code-group,
+  .vp-doc .custom-block [class*='vp-code-block'] {
+    margin-top: 64px;
+  }
+
+  .vp-doc .vp-code-group div[class*='language-'] {
+    margin-top: 0 !important;
   }
 
-  .vp-doc div[class*='language-'].line-numbers-mode .line-numbers-wrapper {
+  .vp-doc .vp-code-group [class*='language-'] > button.copy {
-    padding-top: 64px;
+    top: -112px;
   }
 }