fix the copy button positioning . (#34185)

Author: nisarhassan12

doc/user/assets/sass/_content.scss

@@ -908,9 +908,17 @@ p+p {
     }
 }
 
+.highlight {
+    position: relative;
+
+}
+
 .copy_button {
     display: none;
     position: absolute;
+    right: 10px;
+    top: 10px;
+
     font-size: rem(1.2);
     font-weight: 300;
     border: none;
@@ -921,8 +929,6 @@ p+p {
     cursor: pointer;
     border-radius: $border-radius;
     white-space: nowrap;
-    top: 10px;
-    right: 10px;
     line-height: 2;
     font-family: 'Inter', sans-serif;
 
@@ -1149,7 +1155,7 @@ td span.copyableCode pre:hover .copy_button {
     display: inline-block !important;
 }
 
-pre {
+.highlight {
     position: relative;
 
     &:hover {

doc/user/assets/sass/_layout.scss

@@ -345,8 +345,8 @@ table.inline-headings {
     flex: 1;
     position: sticky;
     top: 90px;
-    height: 100vh;
     overflow-y: auto;
+    height: 100vh;
 
     @media(max-width: 1050px) {
         display: none;
@@ -363,10 +363,10 @@ table.inline-headings {
     padding: var(--x-small) rem(2);
     position: sticky;
     top: 0;
-    height: 100vh;
     overflow-y: auto;
     font-size: var(--sm);
     padding-bottom: 8.5rem;
+    height: 100vh;
 
     &-top {
         margin-top: var(--pico);

doc/user/layouts/_default/baseof.html

@@ -117,11 +117,11 @@
 
       /* Add "Click to Copy" button to code blocks */
       $(document).ready(function () {
-        $("pre.chroma").append(
+        $(".highlight").append(
           '<button class="default_button copy_button" title="Copy code to clipboard">Copy</button>'
         );
 
-        $("pre.chroma button.copy_button").click(function (e) {
+        $("pre.chroma + button.copy_button").click(function (e) {
           var _this = $(this),
             copyHex = document.createElement("textarea");
           copyHex.value = _this.parent().find("code").text().trim();