From 08c4f13d544c72e07c50ac300b2a8651283e9386 Mon Sep 17 00:00:00 2001
From: ClovertaTheTrilobita <cloverta@petalmail.com>
Date: Wed, 5 Aug 2026 12:33:47 +0800
Subject: [PATCH] fix copy button layout

---
 src/layouts/BaseLayout.astro | 21 +++++++++++++++++----
 src/styles/code.css          |  6 +++++-
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 28a9a0a..08e12e8 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -45,11 +45,24 @@ const {
 	<script is:inline>
 		function addCodeCopyButtons() {
 			document.querySelectorAll("pre").forEach((pre) => {
-				if (pre.querySelector(":scope > .code-copy-button")) return;
-
 				const code = pre.querySelector("code");
 				if (!code) return;
 
+				/* 已经处理过则跳过 */
+				if (
+					pre.parentElement?.classList.contains("code-block-wrapper")
+				) {
+					return;
+				}
+
+				/* 创建外层容器 */
+				const wrapper = document.createElement("div");
+				wrapper.className = "code-block-wrapper";
+
+				pre.parentNode?.insertBefore(wrapper, pre);
+				wrapper.appendChild(pre);
+
+				/* 创建复制按钮 */
 				const button = document.createElement("button");
 				button.className = "code-copy-button";
 				button.type = "button";
@@ -63,6 +76,7 @@ const {
 				icon.setAttribute("aria-hidden", "true");
 
 				button.appendChild(icon);
+				wrapper.appendChild(button);
 
 				button.addEventListener("click", async () => {
 					const text = code.textContent ?? "";
@@ -74,6 +88,7 @@ const {
 						textarea.value = text;
 						textarea.style.position = "fixed";
 						textarea.style.opacity = "0";
+						textarea.style.pointerEvents = "none";
 
 						document.body.appendChild(textarea);
 						textarea.select();
@@ -93,8 +108,6 @@ const {
 						button.classList.remove("copied");
 					}, 1500);
 				});
-
-				pre.appendChild(button);
 			});
 		}
 
diff --git a/src/styles/code.css b/src/styles/code.css
index 3fc3802..20a8252 100644
--- a/src/styles/code.css
+++ b/src/styles/code.css
@@ -1,4 +1,8 @@
-pre {
+.code-block-wrapper {
+    position: relative;
+}
+
+.code-block-wrapper pre {
     padding: 1rem;
     border-radius: 3px;
     overflow-x: auto;