diff --git a/docs_theme/css/copy-button.css b/docs_theme/css/copy-button.css
index cbd38bc3f..589ec9597 100644
--- a/docs_theme/css/copy-button.css
+++ b/docs_theme/css/copy-button.css
@@ -2,19 +2,29 @@
   position: absolute;
   top: 6px;
   right: 6px;
-  font-size: 12px;
-  padding: 2px 6px;
-  cursor: pointer;
-
-  background: #f7f7f9;
-  border: 1px solid #e1e1e8;
-  border-radius: 3px;
-
-  color: #dc322f !important;
-
-  box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+  z-index: 10;
+  white-space: nowrap; /* Prevent text wrap */
 }
 
+/* Ensure the PRE container provides positioning context */
+pre {
+  position: relative;
+  padding-top: 35px; /* Room for the button */
+  overflow-x: auto;   /* Allow horizontal scrolling */
+}
+
+/* Code block scrollable */
+pre code {
+  display: block;
+  overflow-x: auto;
+}
+
+/* 
+  The MkDocs/DRF theme injects a <span> inside buttons and applies
+  a text color that overrides btn-inverse defaults.
+  This override is intentionally scoped and limited to color only.
+*/
+.copy-block-button,
 .copy-block-button span {
-  color: #dc322f !important;
+  color: #ffffff !important;
 }
diff --git a/docs_theme/js/copy-button.js b/docs_theme/js/copy-button.js
index 15fc118b2..667460c8b 100644
--- a/docs_theme/js/copy-button.js
+++ b/docs_theme/js/copy-button.js
@@ -1,15 +1,20 @@
 document.addEventListener("DOMContentLoaded", function () {
   document.querySelectorAll("pre > code").forEach(function (codeBlock) {
     const button = document.createElement("button");
-    button.className = "copy-block-button";
+    button.className = "copy-block-button btn btn-inverse btn-small";
     button.type = "button";
     button.textContent = "Copy";
 
     button.addEventListener("click", function () {
-      navigator.clipboard.writeText(codeBlock.textContent).then(function () {
-        button.textContent = "Copied!";
-        setTimeout(() => button.textContent = "Copy", 1200);
-      });
+      navigator.clipboard.writeText(codeBlock.textContent)
+        .then(() => {
+          button.textContent = "Copied!";
+          setTimeout(() => button.textContent = "Copy", 1200);
+        })
+        .catch(() => {
+          button.textContent = "Failed";
+          setTimeout(() => button.textContent = "Copy", 1200);
+        });
     });
 
     const pre = codeBlock.parentNode;