[Serverless] Consider --kbnAppHeadersOffset value for sticky elements and page size (#185874)

fixes [176177](https://github.com/elastic/kibana/issues/176177)
relates to https://github.com/elastic/eui/issues/7765

## Summary

Changes the `min-block-size` to account for the `kibanaProjectHeader`
element, which exists only in serverless, to calculate the page size and
sticky elements' top position.

<img width="1728" alt="image"
src="3b3674dc-0f3a-4671-b5e9-0b2263c2c982">


## Stateful

2383aa9d-eee1-4aaa-94af-081f53ef84a4

## Serverless


6830e136-cb55-4bef-8a8c-2eaf3bdc8374



2c26014b-1572-430f-ae9c-6a4093f76422




af6449d7-4077-4340-b5af-8a29bfae95a2





### How to test
- Start a serverless instance 
- `yarn es serverless --projectType=PROJECT_TYPE --kill --clean
--license trial -E xpack.security.authc.api_key.enabled=true`
- Start a local kibana
- Check if the pages still work as expected

packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`KibanaPageTemplate render basic template 1`] = `
 <div
   class="euiPageTemplate kbnPageTemplate emotion-euiPageOuter-row-grow"
-  style="min-block-size:calc(100vh - var(--euiFixedHeadersOffset, 0));padding-block-start:0"
+  style="min-block-size:calc(100vh - var(--kbnAppHeadersOffset, var(--euiFixedHeadersOffset, 0)));padding-block-start:0"
 >
   <main
     class="emotion-euiPageInner"

packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template_inner.test.tsx.snap

@@ -24,7 +24,7 @@ exports[`KibanaPageTemplateInner isEmpty pageHeader & children 1`] = `
 <_EuiPageTemplate
   className="kbnPageTemplate"
   grow={false}
-  minHeight="calc(100vh - var(--euiFixedHeadersOffset, 0))"
+  minHeight="calc(100vh - var(--kbnAppHeadersOffset, var(--euiFixedHeadersOffset, 0)))"
   offset={0}
 >
   <_EuiPageHeader

packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx

@@ -74,7 +74,9 @@ export const KibanaPageTemplateInner: FC<Props> = ({
       // the following props can be removed to allow the template to auto-handle
       // the fixed header and banner heights.
       offset={0}
-      minHeight={header ? 'calc(100vh - var(--euiFixedHeadersOffset, 0))' : 0}
+      minHeight={
+        header ? 'calc(100vh - var(--kbnAppHeadersOffset, var(--euiFixedHeadersOffset, 0)))' : 0
+      }
       grow={header ? false : undefined}
       {...rest}
     >

x-pack/plugins/observability_solution/infra/public/components/asset_details/tabs/metrics/metrics_template.tsx

@@ -24,13 +24,11 @@ import {
   EuiListGroupItem,
 } from '@elastic/eui';
 import { css, cx } from '@emotion/css';
-import { useKibanaHeader } from '../../../../hooks/use_kibana_header';
 import { useAssetDetailsRenderPropsContext } from '../../hooks/use_asset_details_render_props';
 import { useTabSwitcherContext } from '../../hooks/use_tab_switcher';
 
 export const MetricsTemplate = React.forwardRef<HTMLDivElement, { children: React.ReactNode }>(
   ({ children }, ref) => {
-    const { actionMenuHeight } = useKibanaHeader();
     const { euiTheme } = useEuiTheme();
     const { renderMode } = useAssetDetailsRenderPropsContext();
     const { scrollTo, setScrollTo } = useTabSwitcherContext();
@@ -48,7 +46,7 @@ export const MetricsTemplate = React.forwardRef<HTMLDivElement, { children: Reac
     const kibanaHeaderOffset =
       renderMode.mode === 'flyout'
         ? `0px`
-        : `calc(${actionMenuHeight}px + var(--euiFixedHeadersOffset, 0))`;
+        : `var(--kbnAppHeadersOffset, var(--euiFixedHeadersOffset, 0))`;
 
     const quickAccessHorizontalOffset = isLargeScreen
       ? `${euiTheme.size.s} - 1px` // arbitrary value to align with the content

x-pack/plugins/observability_solution/infra/public/components/asset_details/template/page.tsx

@@ -8,11 +8,10 @@
 import { EuiFlexGroup } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
 import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
 import { useParentBreadcrumbResolver } from '../../../hooks/use_parent_breadcrumb_resolver';
 import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
-import { useKibanaHeader } from '../../../hooks/use_kibana_header';
 import { InfraLoadingPanel } from '../../loading';
 import { ASSET_DETAILS_PAGE_COMPONENT_NAME } from '../constants';
 import { Content } from '../content/content';
@@ -28,7 +27,6 @@ export const Page = ({ tabs = [], links = [] }: ContentTemplateProps) => {
   const { metadata, loading: metadataLoading } = useMetadataStateContext();
   const { rightSideItems, tabEntries, breadcrumbs: headerBreadcrumbs } = usePageHeader(tabs, links);
   const { asset } = useAssetDetailsRenderPropsContext();
-  const { actionMenuHeight } = useKibanaHeader();
   const trackOnlyOnce = React.useRef(false);
 
   const { activeTabId } = useTabSwitcherContext();
@@ -80,11 +78,6 @@ export const Page = ({ tabs = [], links = [] }: ContentTemplateProps) => {
     }
   }, [activeTabId, asset.type, metadata, metadataLoading, telemetry]);
 
-  const heightWithOffset = useMemo(
-    () => `calc(100vh - var(--euiFixedHeadersOffset, 0) - ${actionMenuHeight}px)`,
-    [actionMenuHeight]
-  );
-
   return (
     <PageTemplate
       pageHeader={{
@@ -100,7 +93,7 @@ export const Page = ({ tabs = [], links = [] }: ContentTemplateProps) => {
         <EuiFlexGroup
           direction="column"
           css={css`
-            height: ${heightWithOffset};
+            height: calc(100vh - var(--kbnAppHeadersOffset, var(--euiFixedHeadersOffset, 0)));
           `}
         >
           <InfraLoadingPanel

x-pack/plugins/observability_solution/infra/public/hooks/use_kibana_header.tsx

@@ -1,19 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { useMemo } from 'react';
-
-export const useKibanaHeader = () => {
-  const actionMenuHeight = useMemo(() => {
-    // only in serverless
-    const actionMenu = document.querySelector(`[data-test-subj="kibanaProjectHeaderActionMenu"]`);
-
-    return actionMenu?.getBoundingClientRect().height ?? 0;
-  }, []);
-
-  return { actionMenuHeight };
-};

x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/search_bar/unified_search_bar.tsx

@@ -10,7 +10,6 @@ import type { Query, TimeRange, Filter } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
 import { useEuiTheme, EuiHorizontalRule, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { useKibanaHeader } from '../../../../../hooks/use_kibana_header';
 import { useKibanaContextForPlugin } from '../../../../../hooks/use_kibana';
 import { useUnifiedSearchContext } from '../../hooks/use_unified_search';
 import { ControlsContent } from './controls_content';
@@ -102,13 +101,12 @@ export const UnifiedSearchBar = () => {
 
 const StickyContainer = ({ children }: { children: React.ReactNode }) => {
   const { euiTheme } = useEuiTheme();
-  const { actionMenuHeight } = useKibanaHeader();
 
   return (
     <div
       css={css`
         position: sticky;
-        top: calc(${actionMenuHeight}px + var(--euiFixedHeadersOffset, 0));
+        top: var(--kbnAppHeadersOffset, var(--euiFixedHeadersOffset, 0));
         z-index: ${euiTheme.levels.navigation};
         background: ${euiTheme.colors.emptyShade};
         padding: ${euiTheme.size.l} ${euiTheme.size.l} 0px;