[Chrome Grid] Revert the header displayed next to the sidenav (#244628)

## Summary

One user-facing change we made with [the grid
layout](#243181) is that we
started displaying the Kibana header next to the sidenav instead of
above it.

**Before grid layout**

<img width="630" height="409" alt="Screenshot 2025-10-31 at 11 22 32"
src="https://github.com/user-attachments/assets/f04eaf6a-9605-4346-b105-e172b5f990f2"
/>

**With grid layout** 

<img width="591" height="290" alt="Screenshot 2025-10-31 at 11 25 24"
src="https://github.com/user-attachments/assets/6e34f379-d979-4c82-a6fc-1c94811f17b6"
/>


----- 

With this PR, we revert this user-facing change and return the header to
the top of the nav.


<img width="1624" height="1056" alt="Screenshot 2025-11-28 at 12 54 38"
src="https://github.com/user-attachments/assets/b8bb6a56-4983-4341-9ae6-e52ac46b5636"
/>

Author: Dosant

src/core/packages/chrome/layout/core-chrome-layout-components/layout.styles.ts

@@ -25,7 +25,7 @@ const cssProp = css`
 
   grid-template-areas:
     'banner banner banner'
-    'navigation header sidebar'
+    'header header header'
     'navigation application sidebar'
     'footer footer footer';
 `;

src/core/packages/chrome/layout/core-chrome-layout-components/layout_global_css.tsx

@@ -38,13 +38,11 @@ export const LayoutGlobalCSS = () => {
   `;
 
   const header = css`
-    ${layoutVarName('header.top')}: ${layoutVar('banner.height')};
-    ${layoutVarName('header.left')}: ${navigationWidth}px;
-    ${layoutVarName('header.right')}: ${sidebarWidth}px;
+    ${layoutVarName('header.top')}: ${bannerHeight}px;
+    ${layoutVarName('header.left')}: 0;
+    ${layoutVarName('header.right')}: 0;
     ${layoutVarName('header.height')}: ${headerHeight}px;
-    ${layoutVarName('header.width')}: calc(
-      100vw - ${layoutVar('header.left')} - ${layoutVar('header.right')}
-    );
+    ${layoutVarName('header.width')}: 100vw;
     ${layoutVarName('header.bottom')}: calc(
       100vh - ${layoutVar('banner.height')} + ${layoutVar('header.height')}
     );
@@ -60,7 +58,7 @@ export const LayoutGlobalCSS = () => {
   `;
 
   const navigation = css`
-    ${layoutVarName('navigation.top')}: ${layoutVar('banner.height')};
+    ${layoutVarName('navigation.top')}: ${bannerHeight + headerHeight}px;
     ${layoutVarName('navigation.bottom')}: ${layoutVar('footer.height')};
     ${layoutVarName('navigation.left')}: 0;
     ${layoutVarName('navigation.right')}: calc(100vw - ${navigationWidth}px);
@@ -71,7 +69,7 @@ export const LayoutGlobalCSS = () => {
   `;
 
   const sidebar = css`
-    ${layoutVarName('sidebar.top')}: ${layoutVar('banner.height')};
+    ${layoutVarName('sidebar.top')}: ${bannerHeight + headerHeight}px;
     ${layoutVarName('sidebar.bottom')}: ${layoutVar('footer.height')};
     ${layoutVarName('sidebar.right')}: 0;
     ${layoutVarName('sidebar.left')}: calc(100vw - ${sidebarWidth}px);
@@ -82,9 +80,7 @@ export const LayoutGlobalCSS = () => {
   `;
 
   const application = css`
-    ${layoutVarName('application.top')}: calc(
-      ${layoutVar('banner.height')} + ${layoutVar('header.height')}
-    );
+    ${layoutVarName('application.top')}: ${bannerHeight + headerHeight}px;
     ${layoutVarName('application.bottom')}: ${layoutVar('footer.height')};
     ${layoutVarName('application.left')}: ${navigationWidth}px;
     ${layoutVarName('application.right')}: ${sidebarWidth}px;

src/core/packages/chrome/layout/core-chrome-layout-components/navigation/layout_navigation.styles.ts

@@ -13,10 +13,8 @@ import { layoutVar, layoutLevels } from '@kbn/core-chrome-layout-constants';
 import type { EmotionFn } from '../types';
 
 const root: EmotionFn = ({ euiTheme }) => css`
-  position: sticky;
   grid-area: navigation;
-  align-self: start;
-  height: 100%;
+  height: ${layoutVar('navigation.height')};
   width: ${layoutVar('navigation.width')};
   z-index: ${layoutLevels.navigation};
   display: flex;

x-pack/solutions/observability/test/functional_solution_sidenav/tests/observability_sidenav.ts

@@ -57,6 +57,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         }
 
         // open Infrastructure popover and navigate to some link inside the panel
+        await solutionNavigation.sidenav.expandMore();
         await solutionNavigation.sidenav.clickLink({ navId: 'metrics' });
         // open first link in popover to open a panel
         await solutionNavigation.sidenav.clickLink({ navId: 'metrics:inventory' });

x-pack/solutions/observability/test/serverless/functional/test_suites/infra/navigation.ts

@@ -12,6 +12,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const pageObjects = getPageObjects(['svlCommonPage', 'svlCommonNavigation', 'header']);
 
   const openInfraSection = async () => {
+    await pageObjects.svlCommonNavigation.sidenav.expandMore();
     await pageObjects.svlCommonNavigation.sidenav.openPanel('metrics');
   };