From aa6f56b3c1b319aa90d30bc010d11923bcbb87f1 Mon Sep 17 00:00:00 2001
From: Justin Kambic <jk@elastic.co>
Date: Wed, 10 May 2023 09:01:49 -0400
Subject: [PATCH] [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.
---
 src/components/Header/HeaderControls.tsx | 2 +-
 src/components/Header/Title.tsx          | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Header/HeaderControls.tsx b/src/components/Header/HeaderControls.tsx
index 71e82be6..767be83b 100644
--- 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
index 6c9c5c5c..031bfcba 100644
--- 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"
     >