Skip to content

[EuiDataGrid] Update fullscreen z-index #9267

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
mgadewoll merged 2 commits into from
Dec 11, 2025
Merged

[EuiDataGrid] Update fullscreen z-index #9267

mgadewoll merged 2 commits into from
Dec 11, 2025

Conversation

@mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Dec 11, 2025 •
edited
Loading

Summary

This PR updates the z-index of the fullscreen mode overlay in EuiDataGrid by -1.
This is required due to the changes introduces by the new Flyout System (PR) to ensure that a flyout overlay mask would still overlay the EuiDataGrid fullscreen mode.

Why are we making this change?

🔧 Regression fix: Ensures that overlay flyout masks stay on top of EuiDataGrid's fullscreen mode.

Screenshots #

before after
Screenshot 2025-12-11 at 13 26 19 Screenshot 2025-12-11 at 13 26 22

Impact to users

🟢 No updates required on consumer side.

QA

Checks

  • verify that the flyout overlay is rendered on top of the EuiDataGrid fullscreen mode

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately
    • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
    • If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
  • Designer checklist
    • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

@mgadewoll
fix(EuiDataGrid): fix fullscreen z-index
404414e 
- ensures flyout mask is above the fullscreen overlay
@mgadewoll mgadewoll self-assigned this Dec 11, 2025
@mgadewoll mgadewoll mentioned this pull request Dec 11, 2025
Merged
13 tasks
@elasticmachine
Copy link
Collaborator

elasticmachine commented Dec 11, 2025

💚 Build Succeeded

cc @mgadewoll

@elasticmachine
Copy link
Collaborator

elasticmachine commented Dec 11, 2025

💚 Build Succeeded

cc @mgadewoll

@mgadewoll mgadewoll marked this pull request as ready for review December 11, 2025 13:25
@mgadewoll mgadewoll requested a review from a team as a code owner December 11, 2025 13:25
@tkajtoch tkajtoch self-requested a review December 11, 2025 13:25
tkajtoch
tkajtoch approved these changes Dec 11, 2025
View reviewed changes
Copy link
Member

@tkajtoch tkajtoch left a comment

Choose a reason for hiding this comment

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

Thank you for fixing this! I confirm the change fixes the underlying issue.

@mgadewoll mgadewoll merged commit 59a3ee0 into elastic:main Dec 11, 2025
6 checks passed
@weronikaolejniczak weronikaolejniczak mentioned this pull request Jan 5, 2026
Merged
weronikaolejniczak added a commit to elastic/kibana that referenced this pull request Jan 14, 2026
@weronikaolejniczak
Update EUI to 111.1.0 (#247843)
d377f8f 
## Dependency updates

- `@elastic/eui`: `v111.0.0` ⏩ `v111.1.0`
- `@elastic/eui-theme-borealis`: `v5.2.0` ⏩ `v5.3.0`

---

## Changes

- Removed `euiBasicTable.tableCaptionWithPagination`,
`euiBasicTable.tableAutoCaptionWithPagination`,
`euiBasicTable.tableSimpleAutoCaptionWithPagination`,
`euiBasicTable.tableAutoCaptionWithoutPagination` i18n tokens
- Added `euiBasicTable.caption.itemCountPart.withTotalItemCount`,
`euiBasicTable.caption.paginationPart.withPageCount`,
`euiBasicTable.caption.tableName`, `euiBasicTable.caption.emptyState`
i18n tokens
- Updated snapshot tests
- Updated a couple of Jest assertions due to [this EUI
change](https://github.com/elastic/eui/pull/9254/changes)), see
127ab80

## Package updates

### `@elastic/eui`
[v111.1.0](https://github.com/elastic/eui/releases/tag/v111.1.0)

- Added `dashedCircle` icon
([#9278](elastic/eui#9278))
- Added `crossProjectSearch` icon
([#9275](elastic/eui#9275))
- Added component token `components.tourStepIndicatorInactiveColor` and
`components.tourStepIndicatorActiveColor`
([#9271](elastic/eui#9271))
- Remapped `EuiBeacon` component `success` variant to use `success`
color token instead of `accentSecondary`
([#9271](elastic/eui#9271))
- Added `EuiSplitButton` and its respective sub-components
`EuiSplitButton.ActionPrimary` and `EuiSplitButton.ActionSecondary`
([#9269](elastic/eui#9269))
- Added `productRobot` icon
([#9259](elastic/eui#9259))
- Added beta `euiContainer()`, `euiContainerCSS()`, and
`euiContainerQuery()` Emotion utilities to help work with CSS Container
Queries ([#9264](elastic/eui#9264))
- Added `useEuiContainerQuery` hook to observe container query changes
in JavaScript ([#9251](elastic/eui#9251))
- Updated EuiFlexGroup's `gutterSize` from `l` to `m`
([#9132](elastic/eui#9132))
- Updated EuiSpacer's `size` from `l` to `m`
([#9132](elastic/eui#9132))
- Updated EuiHorizontalRule's `margin` from `l` to `m`
([#9132](elastic/eui#9132))
- Updated EuiPageHeader's tab `size` from `l` to `m`
([#9132](elastic/eui#9132))
- Updated EuiEmptyPrompt's spacer `size` between title and text from `m`
to `s` ([#9132](elastic/eui#9132))
- Updated EuiSearchBar's `gutterSize` from `m` to `s`
([#9132](elastic/eui#9132))

<img width="2158" height="392" alt="image"
src="https://github.com/user-attachments/assets/e217f5a5-5b4f-48df-830d-a60861939945"
/>
<img width="1692" height="608" alt="image"
src="https://github.com/user-attachments/assets/d1f49e86-ad8c-4d80-9d02-54c73baae616"
/>
<img width="2182" height="302" alt="image"
src="https://github.com/user-attachments/assets/295c768c-a2df-48f5-80cb-1a1ce5b19e00"
/>
<img width="1904" height="1066" alt="image"
src="https://github.com/user-attachments/assets/f96cbde6-0529-4f5b-be5b-b56f28c5d2b7"
/>
<img width="1566" height="128" alt="image"
src="https://github.com/user-attachments/assets/be4df105-9e32-4a9d-89f0-fe973f441495"
/>

**Bug fixes**

- Fixed flyout overlay masks not being visible for `EuiDataGrid`'s
fullscreen mode by reducing the `z-index` of the fullscreen mode overlay
([#9267](elastic/eui#9267))

**Accessibility**

- Added information about the empty state of `EuiBasicTable` in the
table caption ([#9265](elastic/eui#9265))
- Improved `EuiBasicTable` accessibility by ensuring a fallback
`tableCaption` is applied if none is provided
([#9254](elastic/eui#9254))

### `@elastic/eui-theme-borealis` v5.3.0

- Added component token `components.tourStepIndicatorInactiveColor` and
`components.tourStepIndicatorActiveColor`
([#9271](elastic/eui#9271))
smith pushed a commit to smith/kibana that referenced this pull request Jan 16, 2026
@weronikaolejniczak @smith
Update EUI to 111.1.0 (elastic#247843)
67087ff 
## Dependency updates

- `@elastic/eui`: `v111.0.0` ⏩ `v111.1.0`
- `@elastic/eui-theme-borealis`: `v5.2.0` ⏩ `v5.3.0`

---

## Changes

- Removed `euiBasicTable.tableCaptionWithPagination`,
`euiBasicTable.tableAutoCaptionWithPagination`,
`euiBasicTable.tableSimpleAutoCaptionWithPagination`,
`euiBasicTable.tableAutoCaptionWithoutPagination` i18n tokens
- Added `euiBasicTable.caption.itemCountPart.withTotalItemCount`,
`euiBasicTable.caption.paginationPart.withPageCount`,
`euiBasicTable.caption.tableName`, `euiBasicTable.caption.emptyState`
i18n tokens
- Updated snapshot tests
- Updated a couple of Jest assertions due to [this EUI
change](https://github.com/elastic/eui/pull/9254/changes)), see
elastic@127ab80

## Package updates

### `@elastic/eui`
[v111.1.0](https://github.com/elastic/eui/releases/tag/v111.1.0)

- Added `dashedCircle` icon
([elastic#9278](elastic/eui#9278))
- Added `crossProjectSearch` icon
([elastic#9275](elastic/eui#9275))
- Added component token `components.tourStepIndicatorInactiveColor` and
`components.tourStepIndicatorActiveColor`
([elastic#9271](elastic/eui#9271))
- Remapped `EuiBeacon` component `success` variant to use `success`
color token instead of `accentSecondary`
([elastic#9271](elastic/eui#9271))
- Added `EuiSplitButton` and its respective sub-components
`EuiSplitButton.ActionPrimary` and `EuiSplitButton.ActionSecondary`
([elastic#9269](elastic/eui#9269))
- Added `productRobot` icon
([elastic#9259](elastic/eui#9259))
- Added beta `euiContainer()`, `euiContainerCSS()`, and
`euiContainerQuery()` Emotion utilities to help work with CSS Container
Queries ([elastic#9264](elastic/eui#9264))
- Added `useEuiContainerQuery` hook to observe container query changes
in JavaScript ([elastic#9251](elastic/eui#9251))
- Updated EuiFlexGroup's `gutterSize` from `l` to `m`
([elastic#9132](elastic/eui#9132))
- Updated EuiSpacer's `size` from `l` to `m`
([elastic#9132](elastic/eui#9132))
- Updated EuiHorizontalRule's `margin` from `l` to `m`
([elastic#9132](elastic/eui#9132))
- Updated EuiPageHeader's tab `size` from `l` to `m`
([elastic#9132](elastic/eui#9132))
- Updated EuiEmptyPrompt's spacer `size` between title and text from `m`
to `s` ([elastic#9132](elastic/eui#9132))
- Updated EuiSearchBar's `gutterSize` from `m` to `s`
([elastic#9132](elastic/eui#9132))

<img width="2158" height="392" alt="image"
src="https://github.com/user-attachments/assets/e217f5a5-5b4f-48df-830d-a60861939945"
/>
<img width="1692" height="608" alt="image"
src="https://github.com/user-attachments/assets/d1f49e86-ad8c-4d80-9d02-54c73baae616"
/>
<img width="2182" height="302" alt="image"
src="https://github.com/user-attachments/assets/295c768c-a2df-48f5-80cb-1a1ce5b19e00"
/>
<img width="1904" height="1066" alt="image"
src="https://github.com/user-attachments/assets/f96cbde6-0529-4f5b-be5b-b56f28c5d2b7"
/>
<img width="1566" height="128" alt="image"
src="https://github.com/user-attachments/assets/be4df105-9e32-4a9d-89f0-fe973f441495"
/>

**Bug fixes**

- Fixed flyout overlay masks not being visible for `EuiDataGrid`'s
fullscreen mode by reducing the `z-index` of the fullscreen mode overlay
([elastic#9267](elastic/eui#9267))

**Accessibility**

- Added information about the empty state of `EuiBasicTable` in the
table caption ([elastic#9265](elastic/eui#9265))
- Improved `EuiBasicTable` accessibility by ensuring a fallback
`tableCaption` is applied if none is provided
([elastic#9254](elastic/eui#9254))

### `@elastic/eui-theme-borealis` v5.3.0

- Added component token `components.tourStepIndicatorInactiveColor` and
`components.tourStepIndicatorActiveColor`
([elastic#9271](elastic/eui#9271))
weronikaolejniczak pushed a commit to weronikaolejniczak/eui that referenced this pull request Jan 23, 2026
@mgadewoll @weronikaolejniczak
[EuiDataGrid] Update fullscreen z-index (elastic#9267)
9529eb5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@tkajtoch tkajtoch tkajtoch approved these changes

Assignees

@mgadewoll mgadewoll

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mgadewoll @elasticmachine @tkajtoch