From 6e38b1b8aa138b78f46f1bffabeba257a7d38f84 Mon Sep 17 00:00:00 2001
From: Yifan Jiang <55911052+YifanJiang233@users.noreply.github.com>
Date: Tue, 25 Apr 2023 15:37:09 +0100
Subject: [PATCH] Fix copy code button position (#1348)

Fix issue #1303 by adding a code wrapper outside the code block.
Ref:
https://stackoverflow.com/questions/60771472/position-a-button-such-that-it-wont-scroll-with-contents
---
 _sass/_base.scss       | 20 ++++++--------------
 assets/js/copy_code.js | 12 +++++++++++-
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/_sass/_base.scss b/_sass/_base.scss
index b65b11c..fac1378 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -826,31 +826,23 @@ progress::-moz-progress-bar {
   height: inherit;
 }
 
-pre {
-  padding: 8px 12px;
+/* Copy button */
+.code-display-wrapper {
   position: relative;
 
-  /* Copy code to clipboard button */
   .copy {
     background: var(--global-card-bg-color);
     border-color: var(--global-bg-color);
     border-radius: .3rem;
-    border-style: solid;
+    border-style: none;
     color: var(--global-text-color);
     font-size: medium;
     opacity: 0;
     position: absolute;
-    right: .25rem;
-    top: .25rem;
-
-    &:active,
-    &:focus,
-    &:hover {
-      color: var(--global-hover-color);
-      opacity: 1;
-    }
+    right: .15rem;
+    top: .15rem;
   }
-
+  
   &:active .copy,
   &:focus .copy,
   &:hover .copy {
diff --git a/assets/js/copy_code.js b/assets/js/copy_code.js
index b12af53..4018916 100644
--- a/assets/js/copy_code.js
+++ b/assets/js/copy_code.js
@@ -2,13 +2,13 @@
 var codeBlocks = document.querySelectorAll('pre');
 codeBlocks.forEach(function (codeBlock) {
   if (codeBlock.querySelector('pre:not(.lineno)') || codeBlock.querySelector('code')) {
+    // create copy button
     var copyButton = document.createElement('button');
     copyButton.className = 'copy';
     copyButton.type = 'button';
     copyButton.ariaLabel = 'Copy code to clipboard';
     copyButton.innerText = 'Copy';
     copyButton.innerHTML = '<i class="fas fa-clipboard"></i>';
-    codeBlock.append(copyButton);
 
     // get code from code block and copy to clipboard
     copyButton.addEventListener('click', function () {
@@ -32,5 +32,15 @@ codeBlocks.forEach(function (codeBlock) {
         copyButton.innerHTML = '<i class="fas fa-clipboard"></i>';
       }, waitFor);
     });
+    
+    // create wrapper div
+    var wrapper = document.createElement('div');
+    wrapper.className = 'code-display-wrapper';
+
+    // add copy button and code block to wrapper div
+    const parent = codeBlock.parentElement;
+    parent.insertBefore(wrapper, codeBlock);
+    wrapper.append(codeBlock);
+    wrapper.append(copyButton);
   }
 });