[Flyout] use container as reference for pushMinBreakpoint

packages/eui/changelogs/upcoming/9592.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fix `EuiFlyout` for `pushMinBreakpoint` when `container` prop is provided

packages/eui/src/components/flyout/flyout.component.tsx

@@ -347,7 +347,11 @@ export const EuiFlyoutComponent = forwardRef(
 
     // Ref for the main flyout element to pass to context
     const internalParentFlyoutRef = useRef<HTMLDivElement>(null);
-    const isPushed = useIsPushed({ type, pushMinBreakpoint });
+    const isPushed = useIsPushed({
+      type,
+      pushMinBreakpoint,
+      containerElement: container,
+    });
     // When no explicit container is provided, push padding targets
     // document.body and global push-offset CSS vars are set. When a
     // container is provided, only that element receives padding.

packages/eui/src/components/flyout/hooks.ts

@@ -6,23 +6,50 @@
  * Side Public License, v 1.
  */
 
-import { useIsWithinMinBreakpoint } from '../../services';
+import { useIsWithinMinBreakpoint, useEuiTheme } from '../../services';
+import { useResizeObserver } from '../observer/resize_observer';
 import { EuiFlyoutProps } from './flyout';
 import { usePropsWithComponentDefaults } from '../provider/component_defaults';
 import { DEFAULT_PUSH_MIN_BREAKPOINT, DEFAULT_TYPE } from './const';
 
 /**
  * Determines if a flyout should be rendered in a "pushed" state based on its
- * configuration and the current window size.
+ * configuration and the current window or container size.
+ *
+ * When `containerElement` is provided, the push/overlay breakpoint decision
+ * is based on the container's width rather than the viewport width. This
+ * ensures flyouts scoped to a container respond to the available space
+ * within that container.
  */
 export const useIsPushed = (
-  props: Pick<EuiFlyoutProps, 'type' | 'pushMinBreakpoint'>
+  props: Pick<EuiFlyoutProps, 'type' | 'pushMinBreakpoint'> & {
+    containerElement?: HTMLElement | null;
+  }
 ) => {
   const {
     type = DEFAULT_TYPE,
     pushMinBreakpoint = DEFAULT_PUSH_MIN_BREAKPOINT,
   } = usePropsWithComponentDefaults('EuiFlyout', props);
 
+  const {
+    euiTheme: { breakpoint: breakpoints },
+  } = useEuiTheme();
+
+  // Always called to satisfy React hook rules; used as fallback
+  // when no container element is provided.
   const windowIsLargeEnoughToPush = useIsWithinMinBreakpoint(pushMinBreakpoint);
-  return type === 'push' && windowIsLargeEnoughToPush;
+
+  // Observe container width so the push/overlay decision reacts to
+  // container resizes, not just viewport resizes.
+  const containerDimensions = useResizeObserver(
+    props.containerElement ?? null,
+    'width'
+  );
+
+  const isLargeEnoughToPush = props.containerElement
+    ? (containerDimensions.width || props.containerElement.clientWidth) >=
+      breakpoints[pushMinBreakpoint]
+    : windowIsLargeEnoughToPush;
+
+  return type === 'push' && isLargeEnoughToPush;
 };

packages/eui/src/components/flyout/manager/flyout_main.tsx

@@ -9,7 +9,7 @@
 import React, { forwardRef } from 'react';
 
 import { EuiManagedFlyout, type EuiManagedFlyoutProps } from './flyout_managed';
-import { useHasChildFlyout, useFlyoutId } from './hooks';
+import { useHasChildFlyout, useFlyoutId, useFlyoutManager } from './hooks';
 import { euiMainFlyoutStyles } from './flyout_main.styles';
 import { useEuiMemoizedStyles } from '../../../services';
 import {
@@ -44,7 +44,12 @@ export const EuiFlyoutMain = forwardRef<HTMLElement, EuiFlyoutMainProps>(
     const flyoutId = useFlyoutId(id);
     const hasChildFlyout = useHasChildFlyout(flyoutId);
     const styles = useEuiMemoizedStyles(euiMainFlyoutStyles);
-    const isPushed = useIsPushed({ type, pushMinBreakpoint });
+    const context = useFlyoutManager();
+    const isPushed = useIsPushed({
+      type,
+      pushMinBreakpoint,
+      containerElement: context?.state.containerElement,
+    });
 
     const cssStyles = [
       hasChildFlyout && !isPushed && styles.hasChildFlyout[side],