[Security Solution][Cloud Security] Fix Graph view removing scrollbar from flyout (#266726)

## Summary

Closes #264432.

Removes inner scrollbar in visualization section.

This is achieved by replacing the static math with a new hook that
measures the live DOM and re-measures via `ResizeObserver`. Both the
document details and entity details flyouts drop their height plumbing.

### Screenshots

Both entity and document flyout render Graph without scrollbars in the
visualization, as expected.

<img width="1439" height="1477" alt="Screenshot 2026-04-30 at 17 05 04"
src="https://github.com/user-attachments/assets/8e6ebb0f-cc0a-45c1-b494-21b1d71fcd87"
/>

<img width="1420" height="1478" alt="Screenshot 2026-04-30 at 17 05 33"
src="https://github.com/user-attachments/assets/aa023844-ed85-4b3b-8fb9-356647a2c68b"
/>

### Checklist

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [x] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

### Identify risks

Risk of not rendering Graph properly affecting its wrapping elements.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: albertoblaz

x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/shared/components/left/graph_view_tab.tsx

@@ -9,11 +9,6 @@ import type { FC } from 'react';
 import React, { memo } from 'react';
 import { GraphVisualization } from '../../../../shared/components/graph_visualization';
 
-const EXPANDABLE_FLYOUT_LEFT_SECTION_HEADER_HEIGHT = 72;
-const VISUALIZE_WRAPPER_PADDING = 16;
-const VISUALIZE_BUTTON_GROUP_HEIGHT = 32;
-const EUI_SPACER_HEIGHT = 16;
-
 export interface GraphViewTabProps {
   /** Entity Store v2 entity ID (`entity.id`) to center the graph on */
   entityId: string;
@@ -26,20 +21,7 @@ export interface GraphViewTabProps {
  * Renders the full graph investigation view centered on the given entity.
  */
 export const GraphViewTab: FC<GraphViewTabProps> = memo(({ entityId, scopeId }) => {
-  const height =
-    window.innerHeight -
-    EXPANDABLE_FLYOUT_LEFT_SECTION_HEADER_HEIGHT -
-    2 * VISUALIZE_WRAPPER_PADDING -
-    VISUALIZE_BUTTON_GROUP_HEIGHT -
-    EUI_SPACER_HEIGHT;
-  return (
-    <GraphVisualization
-      mode="entity"
-      entityId={entityId}
-      scopeId={scopeId}
-      height={`${height}px`}
-    />
-  );
+  return <GraphVisualization mode="entity" entityId={entityId} scopeId={scopeId} />;
 });
 
 GraphViewTab.displayName = 'GraphViewTab';

x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/graph_visualization.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useRef } from 'react';
 import { css } from '@emotion/react';
 import { EuiLoadingSpinner } from '@elastic/eui';
 import type { Filter, Query, TimeRange } from '@kbn/es-query';
@@ -23,6 +23,7 @@ import {
 import { type NodeDocumentDataModel } from '@kbn/cloud-security-posture-common/types/graph/v1';
 import { DOCUMENT_TYPE_ENTITY } from '@kbn/cloud-security-posture-common/schema/graph/v1';
 import { isEntityNodeEnriched } from '@kbn/cloud-security-posture-graph/src/components/utils';
+import { useFlyoutBodyAvailableHeight } from './use_flyout_body_available_height';
 import { PageScope } from '../../../data_view_manager/constants';
 import { useDataView } from '../../../data_view_manager/hooks/use_data_view';
 import { useGetScopedSourcererDataView } from '../../../sourcerer/components/use_get_sourcerer_data_view';
@@ -73,12 +74,7 @@ interface EntityGraphVisualizationProps {
   entityId: string;
 }
 
-export type GraphVisualizationProps = (
-  | EventGraphVisualizationProps
-  | EntityGraphVisualizationProps
-) & {
-  height?: number | string;
-};
+export type GraphVisualizationProps = EventGraphVisualizationProps | EntityGraphVisualizationProps;
 
 /**
  * Full-screen graph investigation view for use in left-panel flyout tabs.
@@ -89,6 +85,9 @@ export type GraphVisualizationProps = (
 export const GraphVisualization: React.FC<GraphVisualizationProps> = memo((props) => {
   const { scopeId } = props;
 
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const height = useFlyoutBodyAvailableHeight(wrapperRef);
+
   const {
     application: { capabilities },
   } = useKibana().services;
@@ -297,10 +296,10 @@ export const GraphVisualization: React.FC<GraphVisualizationProps> = memo((props
 
   return (
     <div
+      ref={wrapperRef}
       data-test-subj={GRAPH_VISUALIZATION_TEST_ID}
       css={css`
-        height: ${props.height ?? 'calc(100vh - 250px)'};
-        min-height: 400px;
+        height: ${height}px;
         width: 100%;
       `}
     >

x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/use_flyout_body_available_height.test.tsx

@@ -0,0 +1,178 @@
+/*
+ * 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 React, { useRef } from 'react';
+import { act, render } from '@testing-library/react';
+import { useFlyoutBodyAvailableHeight } from './use_flyout_body_available_height';
+
+class MockResizeObserver {
+  static instances: MockResizeObserver[] = [];
+  callback: ResizeObserverCallback;
+
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback;
+    MockResizeObserver.instances.push(this);
+  }
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+  trigger() {
+    this.callback([], this as unknown as ResizeObserver);
+  }
+}
+
+const Probe = ({ onHeight }: { onHeight: (h: number) => void }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const height = useFlyoutBodyAvailableHeight(ref);
+  onHeight(height);
+  return <div ref={ref} data-test-subj="probe" />;
+};
+
+const renderInsideFlyoutBody = ({
+  flyoutBottom,
+  wrapperTop,
+  panelPaddingBottom = '16px',
+}: {
+  flyoutBottom: number;
+  wrapperTop: number;
+  panelPaddingBottom?: string;
+}) => {
+  const heights: number[] = [];
+
+  // Override prototype methods so the layout effect (which fires during the
+  // first render) sees the mocked values immediately.
+  const originalGetRect = Element.prototype.getBoundingClientRect;
+  Element.prototype.getBoundingClientRect = function () {
+    if (this.classList.contains('euiFlyoutBody__overflow')) {
+      return { bottom: flyoutBottom } as DOMRect;
+    }
+    if ((this as HTMLElement).dataset?.testSubj === 'probe') {
+      return { top: wrapperTop } as DOMRect;
+    }
+    return originalGetRect.call(this);
+  };
+
+  const originalGetComputedStyle = window.getComputedStyle;
+  window.getComputedStyle = ((el: Element) => {
+    if (el.classList.contains('euiPanel')) {
+      return { paddingBottom: panelPaddingBottom } as CSSStyleDeclaration;
+    }
+    return originalGetComputedStyle(el);
+  }) as typeof window.getComputedStyle;
+
+  const utils = render(
+    <div className="euiFlyoutBody__overflow">
+      <div className="euiPanel">
+        <Probe onHeight={(h) => heights.push(h)} />
+      </div>
+    </div>
+  );
+
+  const restore = () => {
+    Element.prototype.getBoundingClientRect = originalGetRect;
+    window.getComputedStyle = originalGetComputedStyle;
+  };
+
+  return { heights, restore, ...utils };
+};
+
+describe('useFlyoutBodyAvailableHeight', () => {
+  const originalResizeObserver = window.ResizeObserver;
+
+  beforeEach(() => {
+    MockResizeObserver.instances = [];
+    window.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  });
+
+  afterEach(() => {
+    window.ResizeObserver = originalResizeObserver;
+  });
+
+  it('returns flyoutBottom - wrapperTop - panel paddingBottom', () => {
+    const { heights, restore } = renderInsideFlyoutBody({
+      flyoutBottom: 1500,
+      wrapperTop: 100,
+      panelPaddingBottom: '16px',
+    });
+    expect(heights.at(-1)).toBe(1500 - 100 - 16);
+    restore();
+  });
+
+  it('handles a zero-padding panel', () => {
+    const { heights, restore } = renderInsideFlyoutBody({
+      flyoutBottom: 1000,
+      wrapperTop: 50,
+      panelPaddingBottom: '0px',
+    });
+    expect(heights.at(-1)).toBe(950);
+    restore();
+  });
+
+  it('clamps negative results to 0', () => {
+    const { heights, restore } = renderInsideFlyoutBody({
+      flyoutBottom: 100,
+      wrapperTop: 200,
+      panelPaddingBottom: '16px',
+    });
+    expect(heights.at(-1)).toBe(0);
+    restore();
+  });
+
+  it('re-measures when ResizeObserver fires', () => {
+    let currentFlyoutBottom = 1500;
+    const heights: number[] = [];
+
+    const originalGetRect = Element.prototype.getBoundingClientRect;
+    Element.prototype.getBoundingClientRect = function () {
+      if (this.classList.contains('euiFlyoutBody__overflow')) {
+        return { bottom: currentFlyoutBottom } as DOMRect;
+      }
+      if ((this as HTMLElement).dataset?.testSubj === 'probe') {
+        return { top: 100 } as DOMRect;
+      }
+      return originalGetRect.call(this);
+    };
+
+    const originalGetComputedStyle = window.getComputedStyle;
+    window.getComputedStyle = ((el: Element) => {
+      if (el.classList.contains('euiPanel')) {
+        return { paddingBottom: '16px' } as CSSStyleDeclaration;
+      }
+      return originalGetComputedStyle(el);
+    }) as typeof window.getComputedStyle;
+
+    render(
+      <div className="euiFlyoutBody__overflow">
+        <div className="euiPanel">
+          <Probe onHeight={(h) => heights.push(h)} />
+        </div>
+      </div>
+    );
+
+    expect(heights.at(-1)).toBe(1500 - 100 - 16);
+
+    currentFlyoutBottom = 2000;
+    act(() => {
+      MockResizeObserver.instances[0].trigger();
+    });
+
+    expect(heights.at(-1)).toBe(2000 - 100 - 16);
+
+    Element.prototype.getBoundingClientRect = originalGetRect;
+    window.getComputedStyle = originalGetComputedStyle;
+  });
+
+  it('returns 0 when not rendered inside an EuiFlyoutBody', () => {
+    const heights: number[] = [];
+    render(
+      <div>
+        <Probe onHeight={(h) => heights.push(h)} />
+      </div>
+    );
+    expect(heights.at(-1)).toBe(0);
+  });
+});

x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/use_flyout_body_available_height.ts

@@ -0,0 +1,53 @@
+/*
+ * 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 type { RefObject } from 'react';
+import { useLayoutEffect, useState } from 'react';
+
+const FLYOUT_BODY_SELECTOR = '.euiFlyoutBody__overflow';
+const PANEL_SELECTOR = '.euiPanel';
+
+/**
+ * Measures the available vertical space inside the surrounding `EuiFlyoutBody`
+ * for the element pointed at by `ref`, in pixels.
+ *
+ * The returned height fills the area from the top of `ref.current` down to the
+ * bottom of `.euiFlyoutBody__overflow`, minus the bottom padding of the nearest
+ * enclosing `.euiPanel` (so the panel's `paddingMedium` doesn't push content
+ * past the flyout body and trigger a redundant scrollbar).
+ *
+ * Re-measures on viewport resize via `ResizeObserver`. Returns `0` until the
+ * element is mounted inside an `EuiFlyoutBody`.
+ */
+export const useFlyoutBodyAvailableHeight = (ref: RefObject<HTMLElement | null>): number => {
+  const [height, setHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const measure = () => {
+      if (!el.isConnected) return;
+      const flyoutBody = el.closest(FLYOUT_BODY_SELECTOR);
+      if (!flyoutBody) return;
+      const panel = el.closest(PANEL_SELECTOR);
+      const paddingBottom = panel ? parseFloat(getComputedStyle(panel).paddingBottom) || 0 : 0;
+      const flyoutBottom = flyoutBody.getBoundingClientRect().bottom;
+      const wrapperTop = el.getBoundingClientRect().top;
+      const next = Math.max(0, flyoutBottom - wrapperTop - paddingBottom);
+      setHeight((prev) => (prev === next ? prev : next));
+    };
+
+    measure();
+
+    const observer = new ResizeObserver(measure);
+    observer.observe(document.body);
+    return () => observer.disconnect();
+  }, [ref]);
+
+  return height;
+};