fix(docs-infra): avoid code copy button overlap

KirtiRamchandani · atscott · commit b7cb5844cfcf · 2026-06-08T14:19:49.000-07:00
Reveal code copy controls on hover and focus so long code snippets stay readable while keyboard access and copy state feedback remain intact.
diff --git a/adev/shared-docs/styles/docs/_code.scss b/adev/shared-docs/styles/docs/_code.scss
@@ -228,11 +228,14 @@ $code-font-size: 0.875rem;
     border-radius: 0.25rem;
     cursor: pointer;
     z-index: var(--z-index-icon);
+    opacity: 0;
+    pointer-events: none;
     background-color: var(--octonary-contrast);
     border: 1px solid var(--senary-contrast);
     transition:
       background-color 0.3s ease,
-      border-color 0.3s ease;
+      border-color 0.3s ease,
+      opacity 0.3s ease;
 
     .docs-icon {
       transition: opacity 0.3s ease-out;
@@ -256,6 +259,9 @@ $code-font-size: 0.875rem;
     }
 
     &.docs-copy-source-code-button-success {
+      opacity: 1;
+      pointer-events: auto;
+
       .docs-copy {
         opacity: 0;
       }
@@ -273,6 +279,32 @@ $code-font-size: 0.875rem;
     }
   }
 
+  .docs-code:hover,
+  .docs-code:focus-within,
+  .docs-example-viewer-code-wrapper:hover,
+  .docs-example-viewer-code-wrapper:focus-within {
+    > button[docs-copy-source-code] {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  button[docs-copy-source-code]:focus-visible,
+  button[docs-copy-source-code].docs-copy-source-code-button-failed {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .docs-code:has(.docs-code-header) {
+    button[docs-copy-source-code] {
+      top: 0.45rem;
+    }
+
+    .docs-code-header {
+      padding-inline-end: 3rem;
+    }
+  }
+
   .docs-code .docs-code-header {
     position: relative;
     h3 {
