Clipboard copy button scrolling issue fix.

.gitignore

@@ -20,3 +20,4 @@ data/*
 !*.keep
 conf/generated.keystore
 .bsp/
+.vscode

app/assets/css/modules/_clipboard.styl

@@ -1,21 +1,24 @@
 
 .prettyprint
   position: relative
+  padding-top: 10px !important 
+  padding-bottom: 10px !important
 
-  .copy-button
-    cursor: pointer;
-    border: 0;
-    font-size: 10px;
-    text-transform: uppercase;
-    font-weight: 500;
-    padding: 0 0 0 0;
-    color: green-dark;
-    background-color: transparent;
-    position: absolute;
-    top: 0;
-    right: 0;
+.copy-button
+  align-self: end
+  padding: 10px 10px !important
+  background: #f7f7f7;
+  border: 1px solid;
+  border-radius: 8px
+  color: #447103
+  cursor: pointer
+  font-size: var(--font-size-s)
+  justify-self: end
+  position: absolute
+  right: 0
+  z-index: 999999
 
-  // This is a terrible hack, but prettify will try coloring the Copy button otherwise...
-  .copy-button:before
-    content: "Copy"
+
+.documentation #content article 
+  position: relative
 

app/views/clipboard.scala.html

@@ -2,40 +2,34 @@
 
 <script type="text/javascript" charset="utf-8" src="@routes.Assets.versioned("lib/clipboard.js/clipboard.js")"></script>
 @views.html.helper.script(Symbol("type") -> "text/javascript") {
-(function(){
-    var pre = document.getElementsByClassName('prettyprint');
-    for (var i = 0; i < pre.length; i++) {
-        var button = document.createElement('button');
-        button.className = 'copy-button';
+    (function(){
+        $(".prettyprint").before("<button class='copy-button'>Copy</button>");
 
-        pre[i].appendChild(button);
-    }
+          // Run Clipboard
+          var copyCode = new ClipboardJS('.copy-button', {
+              target: function(trigger) {
+                 return trigger.nextElementSibling;
+              }
+          });
 
-    // Run Clipboard
-    var copyCode = new ClipboardJS('.copy-button', {
-        target: function(trigger) {
-            return trigger.previousElementSibling;
-        }
-    });
+          // On success:
+          copyCode.on('success', function(event) {
+              event.clearSelection();
+              event.trigger.textContent = ' Success';
+              window.setTimeout(function() {
+                  event.trigger.textContent = 'Copy';
+              }, 2000);
+          });
 
-    // On success:
-    copyCode.on('success', function(event) {
-        event.clearSelection();
-        event.trigger.textContent = ' Success';
-        window.setTimeout(function() {
-            event.trigger.textContent = '';
-        }, 2000);
-    });
+          // On error (Safari):
+          // - Change the  "Press Ctrl+C to copy"
+          // - Swap it to "Copy" in 2s.
+          copyCode.on('error', function(event) {
+              event.trigger.textContent = 'Press "Ctrl + C" to copy';
+              window.setTimeout(function() {
+                  event.trigger.textContent = 'Copy';
+              }, 5000);
+          });
 
-    // On error (Safari):
-    // - Change the  "Press Ctrl+C to copy"
-    // - Swap it to "Copy" in 2s.
-    copyCode.on('error', function(event) {
-        event.trigger.textContent = 'Press "Ctrl + C" to copy';
-        window.setTimeout(function() {
-            event.trigger.textContent = '';
-        }, 5000);
-    });
-
-})();
+      })();
 }