fix: copy button position

2 files changed, 34 insertions, 24 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 6e83511..a2f67cf 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -66,7 +66,7 @@ li {
     list-style-type: none;
   }
 
-  & > input[type="checkbox"] {
+  &>input[type="checkbox"] {
     width: var(--li-checkbox-size);
     height: var(--li-checkbox-size);
     margin: 0 0.2em 0.15em -1.25em;
@@ -86,17 +86,24 @@ input {
 
 /* Code blocks */
 
+.highlight {
+  position: relative;
+}
+
+
+.copy-code-container {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 10;
+}
+
 .copy-code-button {
   background-color: var(--background);
   font-family: var(--font-mono);
   padding: 3px 6px;
-  font-size: 0.8em;
+  font-size: .8em;
   border-radius: var(--copy-code-button-border-radius);
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 1;
-  display: none;
   border: 1px solid var(--code-border);
 }
 
@@ -598,4 +605,4 @@ blockquote {
 blockquote p {
   margin-left: 1rem;
   margin-right: 1rem;
-}
+}
\ No newline at end of file
diff --git a/static/js/copy-code.js b/static/js/copy-code.js
index 2de3cda..ee7cdc7 100644
--- a/static/js/copy-code.js
+++ b/static/js/copy-code.js
@@ -1,34 +1,37 @@
 document.addEventListener("DOMContentLoaded", function () {
-  const codeBlocks = document.querySelectorAll("pre");
+  const codeBlocks = document.querySelectorAll(".highlight")
 
   codeBlocks.forEach((codeBlock) => {
-    if (codeBlock.className == "mermaid") return;
-    const copyButton = document.createElement("button");
-    copyButton.className = "copy-code-button";
-    copyButton.textContent = "copy";
+    if (codeBlock.className == "mermaid") return
+    const copyButton = document.createElement("button")
+    copyButton.className = "copy-code-button"
+    copyButton.textContent = "copy"
+    const copyButtonContainer = document.createElement("div")
+    copyButtonContainer.className = "copy-code-container"
+    copyButtonContainer.appendChild(copyButton)
 
     // Insert the button inside the <pre> block
-    codeBlock.appendChild(copyButton);
+    codeBlock.appendChild(copyButton)
 
     copyButton.addEventListener("click", function () {
-      const code = codeBlock.querySelector("code");
+      const code = codeBlock.querySelector("code")
       // Get the code content
-      const textToCopy = code.textContent || code.innerText;
+      const textToCopy = code.textContent || code.innerText
 
       // Use the Clipboard API to copy the text
       navigator.clipboard
         .writeText(textToCopy)
         .then(() => {
           // Change button text to "Copied"
-          copyButton.textContent = "copied";
+          copyButton.textContent = "copied"
 
           setTimeout(() => {
-            copyButton.textContent = "copy";
-          }, 2000); // Reset the button text after 2 seconds
+            copyButton.textContent = "copy"
+          }, 2000) // Reset the button text after 2 seconds
         })
         .catch((err) => {
-          console.error("Unable to copy text:", err);
-        });
-    });
-  });
-});
+          console.error("Unable to copy text:", err)
+        })
+    })
+  })
+})