Fix EuiCodeBlock padding for scrollbar (#2727)

elastic · Jan 2, 2020 · 3768e48 · 3768e48
1 parent 07c6a78
commit 3768e48
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@
 - Fixed `isExpanded` property of nodes from `EuiTreeView` ([#2700](https://github.com/elastic/eui/pull/#2700))
 - Added text selection to `EuiLink` button ([#2722](https://github.com/elastic/eui/pull/#2722))
 - Fixed bug in `EuiDataGrid` where resizing columns changed the active DOM element ([#2724](https://github.com/elastic/eui/pull/#2724))
+- Fixed position of scrollbar in `EuiCodeBlock` ([#2727](https://github.com/elastic/eui/pull/#2727))
 
 ## [`17.3.1`](https://github.com/elastic/eui/tree/v17.3.1)
 

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,9 @@
     font-size: $euiFontSize;
   }
 
+  // Storing for re-use the sizing of controls plus extra padding
+  $controlsPadding: $euiSizeL + $euiSizeXS;
+
   // Small padding
   &.euiCodeBlock--paddingSmall {
     .euiCodeBlock__pre {
@@ -74,6 +73,10 @@
       top: $euiSizeS;
       right: $euiSizeS;
     }
+
+    &.euiCodeBlock--hasControls .euiCodeBlock__pre {
+      padding-right: $euiSizeS + $controlsPadding;
+    }
   }
 
   // Medium padding
@@ -86,6 +89,10 @@
       top: $euiSize;
       right: $euiSize;
     }
+
+    &.euiCodeBlock--hasControls .euiCodeBlock__pre {
+      padding-right: $euiSize + $controlsPadding;
+    }
   }
 
   // Large padding
@@ -98,16 +105,20 @@
       top: $euiSizeL;
       right: $euiSizeL;
     }
+
+    &.euiCodeBlock--hasControls .euiCodeBlock__pre {
+      padding-right: $euiSizeL + $controlsPadding;
+    }
   }
 
-  /**
-  ** 1. Size the code against the text its embedded within.
-  **/
+  /*
+   * 1. Size the code against the text its embedded within.
+   */
   &.euiCodeBlock--inline {
     display: inline-block;
     white-space: pre;
     color: $euiTextColor;
-    font-size: 90%; // 1
+    font-size: 90%; /* 1 */
     padding: 0 $euiSizeS;
     background: $euiCodeBlockBackgroundColor;