[EuiDataGrid] Fix cell popover hidden behind sibling/nested flyouts

[acstll]

Summary

Resolves #8801

Fixes a bug where cell popovers are not visible in sibling/nested flyouts because of z-index. For a detailed explanation of the approach, please see #8801 (comment)

API Changes

N/A

Screenshots

The screenshot represent the "after the fix" state. The expanded cell content popover in the screenshot is not visible without the fix.

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

• 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
• 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
• 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
• 🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

Impact level: 🟢 None

This is a bug fix. It allows removing a workaround, as in elastic/kibana#251434

✔︎ Tested in Kibana → CI run in elastic/kibana#267791

Release Readiness

• Documentation: {link to docs page(s)}
• Figma: {link to Figma or issue}
• Migration guide: {steps or link, for breaking/visual changes or deprecations}
• Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}

No migration or adoption needed, only the temporary workaround can be removed. Tracking issue: elastic/kibana#252119

QA instructions for reviewer

The only way to test this properly is running Kibana. You need to get to the Traces feature in Discover, which is only available with APM data (you cannot toggle it manually). The page you're looking for is that below, if you don't know how to get there, follow the instructions.

• checkout the branch in PR [EUI] CI run for #9630 kibana#267791
• (check instructions below if needed)
• toggle cell popovers in Traces in the child flyout, check they're visible (happy path)
• revert the local build of eui to use the latest published version (edit package.json, yarn kbn bootstrap, etc.)
• toggle cell popovers in Traces in the child flyout, check they're not visible (sad path)

Instructions to see Traces in Discover

• start Kibana locally, don't forget to run yarn kbn bootstrap
• create a space with an Observability solution view, in Stack Management \ Spaces, and switch to it
• run node scripts/synthtrace simple_trace.ts --target=http://elastic:changeme@localhost:9200 in the terminal to feed APM data to ES
• navigate to Applications \ Traces
• click on one of the list items e.g. "240rpm/75% 1000ms"
• scroll down, click on the "Open full trace in Discover" button
• toggle open the "dialog with details" by clicking the action on the row
• in the flyout, in the "Trace summary" section, either click on "Expand trace timeline" or click the graphic itself
• in the new "Trace timeline" flyout, click again on the graphic to open the child flyout
• in the Overview table/grid, try expanding the cell content (that opens in a popover)

Toggle screenshots

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
• Tests: Added/updated Jest, Cypress, and VRT
• Changelog: Added changelog entry
• Breaking changes: Added breaking change label (if applicable)

Reviewer checklist

• Approved Impact Assessment — Acceptable to merge given the consumer impact.
• Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

[Copilot]

Pull request overview

Fixes an EuiDataGrid layering bug where cell expansion popovers could render underneath sibling/nested EuiFlyout overlay masks due to using a fixed z-index.

Changes:

• Removed the fixed zIndex passed to the grid’s cell expansion popover so EuiPopover can derive z-index from the anchor’s stacking context.
• Simplified DataGrid z-index variables to only track internal sticky header layering (no longer defining a dedicated cellPopover level).
• Updated the existing RTL unit snapshot expectation and added an upcoming changelog entry.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
packages/eui/src/components/datagrid/data_grid.styles.ts	Removes the dedicated cellPopover z-index level and documents the new layering approach; keeps stickyHeader for internal grid layers.
packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.tsx	Stops passing a fixed zIndex so popover stacking follows the anchor context (default EuiPopover behavior).
packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.test.tsx	Updates the inline snapshot z-index value to reflect the new default-derived behavior.
packages/eui/changelogs/upcoming/9630.md	Documents the bug fix and the behavioral change in how z-index is determined.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 216e64b
• Documentation website
• Storybook

History

• 💚 Build #3397 succeeded 656c360

cc @acstll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 216e64b

History

• 💚 Build #6384 succeeded 656c360

cc @acstll

[weronikaolejniczak]

The approach and code lgtm, I'm testing in Kibana right now and validating some edge cases...

[weronikaolejniczak]

LGTM 🟢 The fix works in Kibana. Thanks for the detailed QA instructions, @acstll 🙏🏻

We have to wait with the merge until the next release is made.