[EuiFlyout] Keep body accessible at short viewport heights

[vianmangal]

Summary

• Prevents EuiFlyoutBody from collapsing to zero height when a short viewport cannot fit a large header and footer.
• Keeps flyout headers and footers from shrinking, preserves one standard-control row for the body, and makes the flyout container scroll when the combined minimum heights exceed the viewport.
• Adds Cypress coverage for a 640 × 360 CSS-pixel viewport and verifies that body content remains scrollable and reachable.

Fixes #9881.

API Changes

None.

Screenshots

The regression is layout-dependent and covered by the Cypress component test. Before the fix, the body has a 0px client height; after the fix, it retains a scrollable region and all three flyout regions remain reachable.

Impact Assessment

• 🔴 Breaking changes
• 💅 Visual changes — Limited to constrained-height flyouts whose body would otherwise collapse.
• 🧪 Test impact
• 🔧 Hard to integrate

Impact level: 🟢 Low

Release Readiness

• Documentation: no public API or usage change.
• Figma: no design-system change.
• Migration guide: no migration required.
• Adoption plan: bug fix to existing behavior.

QA instructions for reviewer

1. Render a flyout with a tall header, scrollable body, and tall footer.
2. Set the viewport to approximately 640 × 360 CSS pixels, equivalent to a 2560 × 1440 display at 400% zoom.
3. Confirm the header and footer retain their content height.
4. Confirm the body remains visible and can scroll to its final interactive element.
5. Run yarn test-cypress --spec "**/flyout.spec.tsx" --headless from packages/eui.

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 — not applicable
• Tests: Added Cypress regression coverage; existing flyout Jest suite passes
• Changelog: Added changelog entry
• Breaking changes: Not applicable

[github-actions]

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?

[Copilot]

Pull request overview

This PR fixes an accessibility/layout regression in EuiFlyout on very short viewports (e.g., ~360px tall / 400% zoom) by preventing the flyout body from collapsing to 0 height and ensuring the overall flyout remains scrollable when the combined header/footer minimum heights exceed the viewport.

Changes:

• Made the flyout container vertically scrollable so header/body/footer remain reachable when minimum heights exceed the viewport.
• Prevented flyout header/footer from shrinking and enforced a minimum body height to keep body content accessible.
• Added a Cypress component test covering a 640×360 viewport regression case and added an upcoming changelog entry.

Reviewed changes

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

Show a summary per file

File	Description
packages/eui/src/components/flyout/flyout.styles.ts	Allows the flyout container to scroll vertically when content/min-heights exceed the viewport.
packages/eui/src/components/flyout/flyout_body.styles.ts	Adds a minimum body height to prevent collapse at constrained viewport heights.
packages/eui/src/components/flyout/flyout_header.styles.ts	Prevents header shrink to preserve header usability in constrained layouts.
packages/eui/src/components/flyout/flyout_footer.styles.ts	Prevents footer shrink to preserve footer usability in constrained layouts.
packages/eui/src/components/flyout/flyout.spec.tsx	Adds Cypress regression coverage for short viewport behavior.
packages/eui/changelogs/upcoming/9944.md	Documents the bug fix in the upcoming changelog.

Suppressed comments (1)

packages/eui/src/components/flyout/flyout.spec.tsx:125

• The test currently asserts the header/footer are "visible", but it doesn't verify the new behavior described in the PR: that the flyout container becomes scrollable and the footer is reachable when chrome min-heights exceed the viewport. Adding a scrollIntoView() check for the footer and asserting the flyout container scrollTop changes would make this regression coverage more direct and less reliant on Cypress' visibility semantics.

      cy.get('[data-test-subj="flyoutHeader"]').should('be.visible');
      cy.get('[data-test-subj="flyoutFooter"]').should('be.visible');
      cy.get('[data-test-subj="bodyAction"]')
        .scrollIntoView()
        .should('be.visible');
      cy.get('[data-test-subj="euiFlyoutBodyOverflow"]')
        .its('0.scrollTop')
        .should('be.greaterThan', 0);

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[tsullivan]

Thanks for taking the time to file this PR. The underlying problem is real, but setting overflow-y: auto on the flyout root has a side effect worth working around: once either axis is scrollable, the browser forces overflow-x to auto too. I confirmed the computed overflow-x is auto on this branch. That clips the two things the flyout deliberately draws outside its own edges:

1. With closeButtonPosition="outside", the close button is clipped and unclickable — a right-side flyout ends up with no visible way to close it. EuiCollapsibleNav uses this configuration.
2. On a resizable flyout, the drag handle's outer half is cut off, so you lose half the grab area.

Making the root a scroll container also means the absolutely-positioned close button scrolls with the content. To reproduce: a tall header and footer (176px + 184px, plus the new 40px body minimum, against a 360px viewport) makes the root scroll, and the close button ends up 32px above the top of the screen — unreachable. The header scrolls out of view too, which is not desirable.

Scoping the scroll to an inner wrapper, rather than the root, would address all of these.

Separately, the 40px min-height on the body doesn't quite deliver what it's after: with the body's own padding (24px top and bottom at this story's padding size) and the 8px scroll fade, the preserved space shows almost no content. It probably needs to account for that padding.

One small thing: euiFormVariables() is being called just to read controlHeight, which is the same value as euiTheme.size.xxl — worth using the latter and dropping the dependency on the form module.