Fix code block buttons overlapping content (#2772)

* Add temporary fix: Padding top to avoid content overlap

not the prettiest solution, though

* Only show codeblock buttons on hover

* Re-add top padding on mobile

* Align code block buttons on left on mobile

* Fix again positioning and background color in most cases

* Fix ApiCalls

* Ensure buttonGroups are properly aligned on mobile

Author: pwizla

docusaurus/src/scss/api-call.scss

@@ -98,7 +98,6 @@
 
       --custom-code-block-background-color: var(--custom-api-call-response-content-background-color);
     }
-
   }
 
   .theme-code-block {
@@ -107,6 +106,123 @@
     &-highlighted-line {
       background-color: var(--strapi-neutral-150) !important;
     }
+
+    .clean-btn {
+      background-color: white;
+      position: relative;
+      top: -12px;
+
+      svg,
+      i::before {
+        color: black;
+      }
+
+      span {
+        color: black;
+      }
+    }
+
+    &:has([class*="codeBlockTitle"]) {
+      .clean-btn {
+        top: -50px;
+      }
+    }
+  }
+
+
+  [class*="buttonGroup"],
+  .ai-button-group {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  .theme-code-block:hover {
+    [class*="buttonGroup"],
+    .ai-button-group {
+      opacity: 1;
+      
+      .clean-btn {
+        opacity: 1 !important;
+        
+        svg,
+        i::before,
+        span {
+          opacity: 0.6;
+          transition: opacity 0.2s ease;
+        }
+      }
+    }
+  }
+
+  .clean-btn:hover {
+    svg,
+    i::before,
+    span {
+      opacity: 1 !important;
+    }
+  }
+}
+
+@include medium-up {
+  .api-call__request {
+    [class*="buttonGroup"] {
+      right: -24px;
+      top: -66px;
+    }
+  }
+
+  .api-call__response {
+    [class*="buttonGroup"] {
+      right: 0;
+      top: -51px;
+    }
+  }
+}
+
+@include medium-down {
+  .api-call {
+    .theme-code-block {
+      [class*="buttonGroup"],
+      [class*="buttonGroup"] .clean-btn,
+      .ai-button-group,
+      .ai-button-group .clean-btn {
+        opacity: 1 !important;
+      }
+
+      [class*="buttonGroup"],
+      .ai-button-group {
+        .clean-btn {
+          svg,
+          i::before,
+          span {
+            opacity: 1 !important;
+          }
+        }
+      }
+
+      [class*="buttonGroup"],
+      .ai-button-group {
+        right: auto;
+        left: 0;
+      }
+
+      [class*="codeBlockTitle"] {
+        padding-right: 84px;
+      }
+
+      &[class*="codeBlockContainer"],
+      [class*="codeBlockContainer"] {
+        [class*="codeBlockContent"] {
+          padding-top: 48px;
+        }
+      }
+
+      &:has([class*="codeBlockTitle"]) {
+        .clean-btn {
+          top: 8px;
+        }
+      }
+    }
   }
 }
 
@@ -127,5 +243,17 @@
         border: solid 1px transparent !important;
       }
     }
+
+    .theme-code-block {
+      .clean-btn {
+        background-color: var(--strapi-neutral-0);
+
+        svg,
+        i::before,
+        span {
+          color: var(--strapi-neutral-900);
+        }
+      }
+    }
   }
-}
+}

docusaurus/src/scss/code-block.scss

@@ -149,6 +149,7 @@ pre.prism-code {
   &[class*="codeBlockContainer"],
   [class*="codeBlockContainer"] {
     background: var(--custom-code-block-background-color);
+    position: relative;
 
     &:not(:has([class*="codeBlockTitle"])) {
       padding: 24px !important;
@@ -208,7 +209,6 @@ pre.prism-code {
     position: relative;
   }
 
-
   [class*="codeBlockContent"] {
     border-radius: 0;
     border-color: transparent;
@@ -307,36 +307,92 @@ pre.prism-code {
         background-color: var(--strapi-neutral-200);
         position: absolute;
         top: -4px;
-        left: 62px
+        left: 62px;
       }
     }
   }
 }
 
-// Make code block buttons always visible with reduced opacity
-[class*="buttonGroup"] {
-  opacity: 0.7; // Always visible with slight transparency
+// Desktop: Button opacity behavior
+[class*="buttonGroup"],
+.ai-button-group {
+  opacity: 0;
   transition: opacity 0.2s ease;
-  
-  &:hover {
-    opacity: 1; // Full opacity on hover
-  }
 }
 
-[class*="buttonGroup"] .clean-btn {
-  opacity: inherit; // Inherit from parent buttonGroup
+[class*="codeBlock"]:hover {
+  [class*="buttonGroup"],
+  .ai-button-group {
+    opacity: 1;
+    
+    .clean-btn {
+      opacity: 1 !important;
+      
+      svg,
+      i::before,
+      span {
+        opacity: 0.6;
+        transition: opacity 0.2s ease;
+      }
+    }
+  }
 }
 
+.clean-btn:hover {
+  svg,
+  i::before,
+  span {
+    opacity: 1 !important;
+  }
+}
 
+// Mobile: Always visible
 @include medium-down {
   [class*="buttonGroup"],
-  [class*="buttonGroup"] .clean-btn {
-    opacity: 1;
+  [class*="buttonGroup"] .clean-btn,
+  .ai-button-group,
+  .ai-button-group .clean-btn {
+    opacity: 1 !important;
+  }
+
+  [class*="buttonGroup"],
+  .ai-button-group {
+    .clean-btn {
+      svg,
+      i::before,
+      span {
+        opacity: 1 !important;
+      }
+    }
+  }
+
+  // Align buttons to the left on mobile
+  [class*="buttonGroup"],
+  .ai-button-group {
+    right: auto;
+    left: 16px;
   }
 
   [class*="codeBlockTitle"] {
     padding-right: 84px;
   }
+
+  // On mobile: always add padding-top (with or without title)
+  .theme-code-block {
+    &[class*="codeBlockContainer"],
+    [class*="codeBlockContainer"] {
+      [class*="codeBlockContent"] {
+        padding-top: 48px;
+      }
+    }
+
+    // Reset button position on mobile (don't put them in title bar)
+    &:has([class*="codeBlockTitle"]) {
+      .clean-btn {
+        top: 8px;
+      }
+    }
+  }
 }
 
 /** Dark theme */
@@ -361,7 +417,7 @@ pre.prism-code {
   }
 
   .clean-btn {
-    background-color: transparent;
+    background-color: var(--strapi-neutral-0);
 
     svg,
     i::before,
@@ -394,4 +450,4 @@ pre.prism-code {
       }
     }
   }
-}
+}