Fix padding around Painless Lab left pane. (#61373)
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
parent
f53d433233
commit
194cc87c30
2 changed files with 8 additions and 3 deletions
|
@ -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', {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue