[Flyout] use container as reference for pushMinBreakpoint

[tsullivan]

Summary

Bug fix for EuiFlyout pushMinBreakpoint when container prop is provided.

Addresses elastic/kibana#258828

Fix: "push" type EuiFlyout has pushMinBreakpoint logic. This changes the type to overlay when the viewport size is below a given breakpoint. Typically, that breakpoint is measured against the browser viewport. When the container prop is passed to EuiFlyout, the breakpoint should be measured against the dimensions of the given container.

API Changes

component / parent	prop / child	change	description
EuiFlyout	pushMinBreakpoint	Updated	When container is set, the push/overlay breakpoint decision is now based on the container's width instead of the viewport width

Screenshots

Setup:

• resizable: false
• ownFocus: true
• type: push
• pushMinBreakpoint: m

Before

After

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

• [ ] 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
• 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
• [ ] 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
• [ ] 🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

Impact level: 🟢 None / 🟢 Low / 🟡 Moderate / 🔴 High

Impact explained: When a flyout has both type="push" and a container, the point at which it flips between push and overlay mode changes. Previously it was based on viewport width; now it's based on container width. Since containers are typically narrower than the viewport, the flyout will switch to overlay sooner (at wider viewport sizes) than before.

Release Readiness

• [ ] Documentation: {link to docs page(s)}
• [ ] Figma: {link to Figma or issue}
• [ ] Migration guide: {steps or link, for breaking/visual changes or deprecations}
• [ ] Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}

QA instructions for reviewer

Checklist before marking Ready for Review

• Filled out all sections above
• QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
• QA: Tested in CodeSandbox and Kibana
• QA: Tested docs changes
• Tests: Added/updated Jest, Cypress, and VRT
• Changelog: Added changelog entry
• Breaking changes: Added breaking change label (if applicable)

Reviewer checklist

• Approved Impact Assessment — Acceptable to merge given the consumer impact.
• Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

[Copilot]

Pull request overview

Fixes EuiFlyout’s pushMinBreakpoint behavior so that when a container is provided, the decision to render in “push” vs “overlay” mode is based on the container width (not the viewport), aligning responsive behavior with the available in-container space.

Changes:

• Updated useIsPushed to optionally compute breakpoint logic against a provided container element’s width (via ResizeObserver + theme breakpoints).
• Wired containerElement into useIsPushed from both unmanaged (EuiFlyoutComponent) and managed (EuiFlyoutMain) flyout entry points.
• Added an upcoming changelog entry documenting the bug fix.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
packages/eui/src/components/flyout/manager/flyout_main.tsx	Uses manager container state as the reference for pushMinBreakpoint decisions in the managed main flyout wrapper.
packages/eui/src/components/flyout/hooks.ts	Extends useIsPushed to support container-width-based breakpoint evaluation and react to container resizes.
packages/eui/src/components/flyout/flyout.component.tsx	Passes the resolved flyout container element into useIsPushed so push/overlay behavior matches container sizing.
packages/eui/changelogs/upcoming/9592.md	Documents the pushMinBreakpoint container-scoped bug fix.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 70df052
• Documentation website
• Storybook

History

• 💚 Build #3217 succeeded 281ee82

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 70df052

History

• 💚 Build #6242 succeeded 281ee82