Skip to content

Conversation

@tkajtoch
Copy link
Member

@tkajtoch tkajtoch commented Nov 4, 2025

Summary

Resolves #9141

This PR fixes the issue with z-index values of EuiFlyout's overlay mask.

When I initially refactored the EuiOverlayMask rendering logic in EuiFlyout I forgot to pass headerZindexLocation="below" which was there before. This was impossible to notice when testing in Storybook, and hid almost perfectly when testing builds if the flyout system branch in Kibana. I noticed it by accident when testing different flyout combinations, but it was also reported during other people's testing - see the linked issue above.

This PR brings back the rarely (never?) used z-index of 6000 for 100% compatibility with previous versions of EUI. Furthermore, the added internal hook is a prep work for intelligent z-index management needed to f i x #9160.

I'm skipping the changelog on this one since this bug shouldn't exist in the first place, and it was never released to the public. The upcoming changelogs describe the correct (after this fix) behavior well enough.

Why are we making this change?

To fix buggy behavior introduced in recent changes to EuiFlyout and the flyout system.

Impact to users

No negative impact to users. This isn't a breaking change.

QA

  1. Checkout the Kibana testing branch locally - gh pr checkout 241722
  2. Install dependencies - yarn kbn bootstrap
  3. Run Kibana as usual

Test if flyouts and their overlay masks look as expected, specifically these variants:

  • Confirm that the "What's new" flyout looks as expected
  • Confirm that the details push flyout in Discover renders as expected
  • Confirm that the AI Assistant flyout looks as expected

General checklist

  • Code quality checklist

@tkajtoch tkajtoch self-assigned this Nov 4, 2025
@tkajtoch tkajtoch added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Nov 4, 2025
@tkajtoch tkajtoch requested a review from a team as a code owner November 4, 2025 01:18
@tkajtoch tkajtoch requested a review from tsullivan November 4, 2025 01:18
...dynamicStyles,
...minWidthOverride,
...(finalMaxWidth ? { maxWidth: finalMaxWidth } : {}),
zIndex,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

z-index is now defined inside the inline style tag. It'll become dynamic in #9160, so I thought it's best if I structure the code in a way that makes that work a little simpler.

};

/**
* TODO: Calculate z-index values so that the latest flyout is always on top
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is to be addressed in a separate PR

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

cc @tkajtoch

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

cc @tkajtoch

@tkajtoch tkajtoch merged commit 3680ae4 into elastic:main Nov 4, 2025
7 checks passed
tkajtoch added a commit to tkajtoch/eui that referenced this pull request Nov 4, 2025
tsullivan pushed a commit to tsullivan/eui that referenced this pull request Nov 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Flyout mask should not cover Kibana header

3 participants