Fix copy code button position (alshedivat#1348)

Fix issue alshedivat#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

Author: YifanJiang233

_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 {

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);
   }
 });