[Serverless] Consider --kbnAppHeadersOffset value for sticky elemen…

…ts and page size (#185874)

fixes [176177](#176177)
relates to elastic/eui#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="https://github.com/elastic/kibana/assets/2767137/3b3674dc-0f3a-4671-b5e9-0b2263c2c982">


## Stateful

https://github.com/elastic/kibana/assets/2767137/2383aa9d-eee1-4aaa-94af-081f53ef84a4

## Serverless


https://github.com/elastic/kibana/assets/2767137/6830e136-cb55-4bef-8a8c-2eaf3bdc8374



https://github.com/elastic/kibana/assets/2767137/2c26014b-1572-430f-ae9c-6a4093f76422




https://github.com/elastic/kibana/assets/2767137/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/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/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;