copy button overlap fix

Author: kaitlynmichael

assets/css/index.css

@@ -1074,6 +1074,21 @@ a[href*="#no-click"], img[src*="#no-click"] {
   background-color: #ddd;
 }
 
+/* Copy button wrapper positioning */
+.copy-button-wrapper {
+  position: absolute;
+  top: 24px;
+  right: 10px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.copy-button-wrapper.expand-content-wrapper {
+  right: 20px;
+}
+
 /* AI Agent Builder Styles */
 
 .agent-builder-container {
@@ -1225,6 +1240,51 @@ a[href*="#no-click"], img[src*="#no-click"] {
   }
 }
 
+/* Fix copy button overlap on smaller screens */
+@media (max-width: 768px) {
+  /* Ensure code blocks have enough padding on the right to accommodate copy button */
+  .highlight {
+    padding-right: 60px !important;
+  }
+
+  /* Adjust copy button wrapper positioning for smaller screens */
+  .copy-button-wrapper {
+    right: 8px !important;
+    top: 8px !important;
+  }
+
+  .copy-button-wrapper.expand-content-wrapper {
+    right: 12px !important;
+  }
+
+  /* Make copy buttons slightly smaller on mobile */
+  .copy-button-wrapper .clipboard-button,
+  .copy-button-wrapper .download-yaml-btn {
+    width: 28px !important;
+    height: 28px !important;
+    padding: 2px !important;
+  }
+}
+
+@media (max-width: 480px) {
+  /* Even more padding for very small screens */
+  .highlight {
+    padding-right: 70px !important;
+  }
+
+  /* Stack buttons vertically on very small screens if both copy and download are present */
+  .copy-button-wrapper {
+    flex-direction: column !important;
+    gap: 4px !important;
+    right: 4px !important;
+    top: 4px !important;
+  }
+
+  .copy-button-wrapper.expand-content-wrapper {
+    right: 8px !important;
+  }
+}
+
 /* Form Groups */
 .form-group {
   @apply space-y-2;

layouts/partials/scripts.html

@@ -10,11 +10,12 @@
             }
                 // Create a wrapper for the button and message
                 const wrapper = document.createElement('div');
+                wrapper.className = 'copy-button-wrapper';
 
                 if (block.parentElement.classList.contains("expand-content")) {
-                    wrapper.style = 'position:absolute;top:24px;right:20px;z-index:1;display:flex;align-items:center;gap:6px;';
+                    wrapper.classList.add('expand-content-wrapper');
                 } else {
-                    wrapper.style = 'position:absolute;top:24px;right:10px;z-index:1;display:flex;align-items:center;gap:6px;';
+                    wrapper.classList.add('standard-wrapper');
                 }
 
                 // Check if this is a YAML embed with download functionality