Fix EuiBottomBar in serverless (#166840)

elastic · Oct 4, 2023 · 620ee8d · 620ee8d
1 parent 88b85eb
commit 620ee8d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/navigation.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/navigation.tsx
@@ -20,6 +20,7 @@ export const ProjectNavigation: React.FC = ({ children }) => {
 
   return (
     <EuiCollapsibleNavBeta
+      data-test-subj="projectLayoutSideNav"
       initialIsCollapsed={isCollapsed}
       onCollapseToggle={onCollapseToggle}
       css={isCollapsed ? { display: 'none;' } : {}}

diff --git a/src/core/public/styles/_base.scss b/src/core/public/styles/_base.scss
@@ -26,6 +26,11 @@
   margin-left: 320px; // Hard-coded for now -- @cchaos
 }
 
+// Add support for serverless nabbar
+.euiBody--hasFlyout .euiBottomBar {
+  margin-left: var(--euiCollapsibleNavOffset, 0);
+}
+
 // Temporary fix for EuiPageHeader with a bottom border but no tabs or padding
 // Will fix in EUI -- @cchaos
 .euiPageHeader--bottomBorder:not(.euiPageHeader--tabsAtBottom):not([class*='euiPageHeader--padding']) {