Fix EuiCodeBlock padding for scrollbar

elastic · Jan 2, 2020 · 40ac201 · 40ac201
1 parent 32b7bef
commit 40ac201
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
@@ -20,10 +20,6 @@
     font-size: inherit;
   }
 
-  &.euiCodeBlock--hasControls {
-    padding-right: $euiSizeL + $euiSizeXS;
-  }
-
   .euiCodeBlock__controls {
     position: absolute;
     top: 0;
@@ -64,6 +60,8 @@
     font-size: $euiFontSize;
   }
 
+  $controlsPadding: $euiSizeL + $euiSizeXS;
+
   // Small padding
   &.euiCodeBlock--paddingSmall {
     .euiCodeBlock__pre {
@@ -74,6 +72,10 @@
       top: $euiSizeS;
       right: $euiSizeS;
     }
+
+    &.euiCodeBlock--hasControls .euiCodeBlock__pre {
+      padding-right: $euiSizeS + $controlsPadding;
+    }
   }
 
   // Medium padding
@@ -86,6 +88,10 @@
       top: $euiSize;
       right: $euiSize;
     }
+
+    &.euiCodeBlock--hasControls .euiCodeBlock__pre {
+      padding-right: $euiSize + $controlsPadding;
+    }
   }
 
   // Large padding
@@ -98,6 +104,10 @@
       top: $euiSizeL;
       right: $euiSizeL;
     }
+
+    &.euiCodeBlock--hasControls .euiCodeBlock__pre {
+      padding-right: $euiSizeL + $controlsPadding;
+    }
   }
 
   /**