[Discover][Metrics] Fix chart panels rendering above push flyout in fullscreen#260127
Merged
justinkambic merged 4 commits intoelastic:mainfrom Mar 31, 2026
Merged
Conversation
justinkambic
added
release_note:skip
Contributor
|
Pinging @elastic/obs-exploration-team (Team:obs-exploration) |
justinkambic
changed the title
lucaslopezf
approved these changes
Mar 31, 2026
Contributor
lucaslopezf
left a comment
lucaslopezf
left a comment
There was a problem hiding this comment.
LGTM! Could we add a test to avoid regressions?
botelastic
Bot
added
the
Team:obs-presentation
Contributor
|
Pinging @elastic/obs-presentation-team (Team:obs-presentation) |
…llscreen EUI push flyouts render inline (no portal), so the flyout lives inside the fullscreen metrics grid stacking context. The presentation panel hover styles elevate `.embPanel` to `euiTheme.levels.menu`, which is higher than the flyout z-index within the same context. Reset chart panel z-index to `auto` in fullscreen to prevent this overlap.
The `.embPanel__hoverActions` toolbar is a sibling of `.embPanel` and gets its own z-index elevation on hover, causing it to render above the push flyout in the same stacking context.
Setting hover actions to z-index auto caused them to clip under charts in adjacent grid rows. Give them a z-index just below the push flyout level so they float above neighboring charts but stay behind the flyout.
…ce of this CSS and the associated test.
justinkambic
force-pushed
the
260087-chart-flyout-zindex-v2
branch
from
d03e747 to
3c1184d
Compare
Contributor
ApprovabilityVerdict: Needs human review This PR bundles a small z-index bug fix with a substantial new feature (service badge navigation in APM waterfall). It also includes suspicious files: delete.json contains what appears to be API credentials, and ISSUE_ANALYSIS.md appears to be internal notes. The author does not own any of the changed files, which are owned by obs-presentation-team and obs-exploration-team who should review. You can customize Macroscope's approvability policy. Learn more. |
Contributor
💚 Build Succeeded
Metrics [docs]Async chunks
History
|
jeramysoucy
pushed a commit
to jeramysoucy/kibana
that referenced
this pull request
Apr 1, 2026
…fullscreen (elastic#260127) ## Summary Fixes elastic#260087 In the fullscreen metrics view, hovering over a chart panel caused it to render on top of the metric insights flyout. This happened because: - The metric insights flyout uses `EuiFlyout` with `type="push"`, which renders inline (no portal), so the flyout lives inside the fullscreen metrics grid's stacking context - The presentation panel hover styles elevate `.embPanel` to `euiTheme.levels.menu`, which is higher than the flyout's z-index within that same stacking context The fix resets `.embPanel` z-index to `auto` inside the fullscreen grid class, preventing chart panels from stacking above the push flyout on hover. ## Test plan - Open Discover with a data view that has metric fields - Switch to the Metrics tab and enter fullscreen mode - Click "View details" on a chart to open the metric insights flyout - Hover over other chart panels and verify they do not render above the flyout - Verify chart hover actions (toolbar buttons) still appear correctly within the chart area - Exit fullscreen and verify normal chart hover behavior is unaffected ### Examples #### Before  #### After 
paulinashakirova
pushed a commit
to paulinashakirova/kibana
that referenced
this pull request
Apr 2, 2026
…fullscreen (elastic#260127) ## Summary Fixes elastic#260087 In the fullscreen metrics view, hovering over a chart panel caused it to render on top of the metric insights flyout. This happened because: - The metric insights flyout uses `EuiFlyout` with `type="push"`, which renders inline (no portal), so the flyout lives inside the fullscreen metrics grid's stacking context - The presentation panel hover styles elevate `.embPanel` to `euiTheme.levels.menu`, which is higher than the flyout's z-index within that same stacking context The fix resets `.embPanel` z-index to `auto` inside the fullscreen grid class, preventing chart panels from stacking above the push flyout on hover. ## Test plan - Open Discover with a data view that has metric fields - Switch to the Metrics tab and enter fullscreen mode - Click "View details" on a chart to open the metric insights flyout - Hover over other chart panels and verify they do not render above the flyout - Verify chart hover actions (toolbar buttons) still appear correctly within the chart area - Exit fullscreen and verify normal chart hover behavior is unaffected ### Examples #### Before  #### After 
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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
Fixes #260087
In the fullscreen metrics view, hovering over a chart panel caused it to render on top of the metric insights flyout. This happened because:
EuiFlyoutwithtype="push", which renders inline (no portal), so the flyout lives inside the fullscreen metrics grid's stacking context.embPaneltoeuiTheme.levels.menu, which is higher than the flyout's z-index within that same stacking contextThe fix resets
.embPanelz-index toautoinside the fullscreen grid class, preventing chart panels from stacking above the push flyout on hover.Test plan
Examples
Before
After