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

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
CJ Cenizal 2020-03-26 10:34:21 -07:00 committed by GitHub
parent f53d433233
commit 194cc87c30
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 3 deletions

View file

@ -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', {

View file

@ -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;
}