[EuiFlyoutMenu] Align menu height with compact AppHeader (49px)

[ryankeairns]

Closes #10202

Important

Kibana coordination
This drops the default EuiFlyoutMenu from 50px → 49px. Discover’s header often still measures 50px (border stacking / TABS_BAR_HEIGHT quirk), so pairing this EUI bump with a Discover AppHeader height fix (true 49px, or a local flyout-menu override if Discover must stay taller) avoids a 1px misalignment.

Please land the Discover/AppHeader change in the same Kibana PR that upgrades EUI to the release containing this change. Reach out to @ryankeairns for Kibana-side input and verification.

👉 Discover reference PR: elastic/kibana#297883
Targeting the data-test-subj is not great, but it works. Tabs in the middle is inherently tricky in dealing with borders.

Summary

• Sets default EuiFlyoutMenu height to 49px (base * 3 + thinBorder) so it aligns with Kibana’s compact AppHeader (48px + 1px border)
• Repositions the close button top to size.m so it stays vertically centered in the shorter bar
• Fixes the 1px overshoot from aiming at Discover’s measured 50px instead of the real design target (#10202)

Test plan

• Confirm EuiFlyoutMenu container measures 49px in Storybook
• Confirm close/action buttons remain vertically centered
• Spot-check push flyout next to a compact app header alignment (or VRT diffs once CI updates baselines)

[elastic-vault-github-plugin-prod]

📷 14 visual difference(s) found

Look at the visual diff below. If everything is expected, run Approve visual changes to update baselines, re-run the job or make appropriate fixes.

See the visual regression testing wiki for more information.

Expand to review

euiflyout (14 differences)

Story	Diff %	Before	After	Diff
playground desktop	0.26%
push flyouts desktop	1.00%
with banner desktop	0.51%
with banner no header desktop	0.38%
action states desktop	0.50%
pagination example desktop	0.34%
playground desktop	0.41%
playground mobile	0.56%
push flyouts mobile	3.70%
with banner mobile	1.10%
with banner no header mobile	0.83%
action states mobile	1.50%
pagination example mobile	0.89%
playground mobile	0.73%

[elastic-vault-github-plugin-prod]

📷 14 visual difference(s) found

Look at the visual diff below. If everything is expected, run Approve visual changes to update baselines, re-run the job or make appropriate fixes.

See the visual regression testing wiki for more information.

Expand to review

euiflyout (14 differences)

Story	Diff %	Before	After	Diff
playground desktop	0.26%
push flyouts desktop	1.00%
with banner desktop	0.51%
with banner no header desktop	0.38%
action states desktop	0.50%
pagination example desktop	0.34%
playground desktop	0.41%
playground mobile	0.56%
push flyouts mobile	3.70%
with banner mobile	1.10%
with banner no header mobile	0.83%
action states mobile	1.50%
pagination example mobile	0.89%
playground mobile	0.73%

[Copilot]

🟢 Approval recommended

The localized styling changes match the stated requirements, with no unresolved findings.

0 open findings

What changed in this PR

Aligns EuiFlyoutMenu with Kibana’s 49px compact AppHeader, addressing #10202.

Changes:

• Reduces the default menu height from 50px to 49px.
• Adjusts the close button’s vertical offset.
• Documents the alignment change in the changelog.

File	Description
packages/​eui/​src/​components/​flyout/​flyout_menu/​flyout_menu.styles.ts	Updates menu height and close-button positioning.
packages/​eui/​changelogs/​upcoming/​10211.md	Notes the new 49px height and alignment intent.

🧠 Review effort: Balanced

---

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

[infra-vault-gh-plugin-prod]

💚 Build Succeeded

• Buildkite Build
• Commit: 9b7d2d9

History

• 💚 Build #8268 succeeded dd5a4c4

[infra-vault-gh-plugin-prod]

💚 Build Succeeded

• Buildkite Build
• Commit: 9b7d2d9
• Documentation website
• Storybook
• ✅ Visual regression tests passed

History

• 💚 Build #5886 succeeded 9b7d2d9
• 💔 Build #5874 failed dd5a4c4