[UI] Make page title sticky and remove box shadow (#403)

* Make page title sticky and drop box shadow. * Less aggressive `z-index` value for app header.
elastic · May 10, 2023 · aa6f56b · aa6f56b
1 parent b811606
commit aa6f56b
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/src/components/Header/HeaderControls.tsx b/src/components/Header/HeaderControls.tsx
@@ -38,8 +38,8 @@ import { UrlField } from './UrlField';
 const Header = styled(EuiFlexGroup)`
   background-color: ${props => props.theme.colors.emptyShade};
   border-bottom: ${props => props.theme.border.thin};
+  padding: 65px 16px 16px 16px;
   margin: 0px;
-  padding: 16px;
 `;
 
 const TestButtonDivider = styled(EuiFlexItem)`

diff --git a/src/components/Header/Title.tsx b/src/components/Header/Title.tsx
@@ -45,7 +45,8 @@ export function Title() {
         borderBottom: euiTheme.border.thin,
         paddingLeft: 4,
         paddingRight: 4,
-        boxShadow: `0px 2px ${euiTheme.colors.lightestShade}`,
+        position: 'fixed',
+        zIndex: 999,
       }}
       paddingSize="xs"
     >