[Security Solution] bump Timeline, document and timeline flyout components' z-index by 1 to be on top of side nav #236655
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
PhilippeOberti
added
release_note:fix
backport:skip
PhilippeOberti
force-pushed
the
fix-expandable-flyout-zindex
branch
from
786c9d1 to
cf33fdd
Compare
…nents' z-index by 1 to be on top of side nav
PhilippeOberti
force-pushed
the
fix-expandable-flyout-zindex
branch
from
cf33fdd to
2f0bed4
Compare
|
Pinging @elastic/security-threat-hunting-investigations (Team:Threat Hunting:Investigations) |
davismcphee
approved these changes
Sep 27, 2025
rylnd
approved these changes
Sep 30, 2025
x-pack/solutions/security/plugins/security_solution/public/flyout/index.tsx
Show resolved
Hide resolved
...y_solution/public/detection_engine/rule_exceptions/components/add_exception_flyout/index.tsx
Show resolved
Hide resolved
lgestc
approved these changes
Oct 1, 2025
paul-tavares
approved these changes
Oct 1, 2025
NicholasPeretti
approved these changes
Oct 1, 2025
💚 Build Succeeded
Metrics [docs]Async chunks
History
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR an issue that has been present for a few months: the side nav in Security Solution is rendered on top of the expandable flyout.
This issue comes from this change introduced by this PR a few months ago in EUI.
The changes suggested here are:
z-indexfrom1000to1001z-indexfrom1001to1002z-indexfrom1002to1003z-indexfrom1003to1004Thankfully when we had made a similar change over a year ago we had marked all the related flyouts with the following comment
// EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-termSo it was easy to find them.
This is not an ideal fix (obviously it was already not an ideal fix over a year ago) but this will quickly get us back to a better UX, as currently if the flyout opens behind the side nav, users can't resize them at all because the handle to resize is hidden...
What to test
make sure that the security solution flyout is always on top of the side nav
make sure that Timeline is always on top of the security solution flyout
make sure that the timeline flyout is always on top of Timeline
make sure that the flyout on the ESQL tab in Timeline behaves correctly
make sure these work after a page refresh
make sure that things work both with overlay and push modes
make sure that all secondary flyouts - accessible via the Take action button in the flyout's footer - are displayed on top.
The PR description includes the appropriate Release Notes section, and the correct
release_note:*label is applied per the guidelinesReview the backport guidelines and apply applicable
backport:*labels.