Fix padding around Painless Lab left pane. (#61373)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Mar 26, 2020 · 194cc87 · 194cc87
1 parent f53d433
commit 194cc87
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/x-pack/plugins/painless_lab/public/application/components/main.tsx b/x-pack/plugins/painless_lab/public/application/components/main.tsx
@@ -55,7 +55,7 @@ export const Main: React.FunctionComponent = () => {
   return (
     <div className="painlessLabMainContainer">
       <EuiFlexGroup className="painlessLabPanelsContainer" responsive={false} gutterSize="none">
-        <EuiFlexItem>
+        <EuiFlexItem className="painlessLabLeftPane">
           <EuiTitle className="euiScreenReaderOnly">
             <h1>
               {i18n.translate('xpack.painlessLab.title', {

diff --git a/x-pack/plugins/painless_lab/public/styles/_index.scss b/x-pack/plugins/painless_lab/public/styles/_index.scss
@@ -5,12 +5,17 @@
  * This is a very brittle way of preventing the editor and other content from disappearing
  * behind the bottom bar.
  */
-$bottomBarHeight:  calc(#{$euiSize} * 3);
+$bottomBarHeight: calc(#{$euiSize} * 3);
 
 .painlessLabBottomBarPlaceholder {
   height: $bottomBarHeight
 }
 
+.painlessLabLeftPane {
+  padding-top: $euiSizeM;
+  background-color: $euiColorEmptyShade;
+}
+
 .painlessLabRightPane {
   border-right: none;
   border-top: none;
@@ -25,7 +30,7 @@ $bottomBarHeight:  calc(#{$euiSize} * 3);
   flex-direction: column;
   height: 100%;
 
-  [role="tabpanel"] {
+  [role='tabpanel'] {
     height: 100%;
     overflow-y: auto;
   }