Account for --kbnAppHeadersOffset value for sticky header and page size

elastic · Jun 10, 2024 · 54f0fb0 · 54f0fb0
1 parent 9d9bc07
commit 54f0fb0
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 35 deletions.
diff --git a/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx b/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}
     >

diff --git a/...vability_solution/infra/public/components/asset_details/tabs/metrics/metrics_template.tsx b/...vability_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

diff --git a/...ck/plugins/observability_solution/infra/public/components/asset_details/template/page.tsx b/...ck/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

diff --git a/x-pack/plugins/observability_solution/infra/public/hooks/use_kibana_header.tsx b/x-pack/plugins/observability_solution/infra/public/hooks/use_kibana_header.tsx
diff --git a/...ty_solution/infra/public/pages/metrics/hosts/components/search_bar/unified_search_bar.tsx b/...ty_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;