Skip to content

Fix data grid full screen stacking #267339

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

Merged
tcalopes merged 2 commits into from
May 6, 2026
Merged

Fix data grid full screen stacking #267339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
44908d1
Fix data grid full screen stacking
tcalopes May 1, 2026
56c5df7
Merge branch 'main' into 265746-agent-chat-with-entities-table-in-ful…
tcalopes May 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/core/packages/chrome/layout/core-chrome-layout-components/sidebar/layout_sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export const LayoutSidebar = ({ children }: LayoutSidebarProps) => {
css={styles.root}
className="kbnChromeLayoutSidebar"
data-test-subj="kbnChromeLayoutSidebar"
data-kbn-preserve-zindex="true"
{...euiIncludeSelectorInFocusTrap.prop}
>
{children}
Expand Down
3 changes: 2 additions & 1 deletion src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_global_app_style.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,11 @@ const globalLayoutStyles = (euiThemeContext: UseEuiTheme) => {
position: relative; // This is temporary for apps that relied on this being present on \`.application\`
}

// make data grid full screen mode respect the header banner
// make data grid full screen mode respect the header banner and the sidebar
#kibana-body .euiDataGrid--fullScreen {
height: calc(100vh - var(--kbnHeaderBannerHeight));
top: var(--kbnHeaderBannerHeight);
right: ${layoutVar('sidebar.width', '0px')};
}
`;
};
Expand Down
8 changes: 6 additions & 2 deletions src/platform/packages/shared/kbn-unified-data-table/src/hooks/use_full_screen_watcher.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,16 @@ export const useFullScreenWatcher = () => {
export const EUI_DATA_GRID_FULL_SCREEN_CLASS = 'euiDataGrid--fullScreen';
export const UNIFIED_DATA_TABLE_FULL_SCREEN_CLASS = 'unifiedDataTable__fullScreen';

// Ensure full screen data grids are not covered by elements with a z-index
// Ensure full screen data grids are not covered by elements with a z-index.
// Elements can opt out of the z-index reset by setting data-kbn-preserve-zindex="true",
// which preserves their stacking context and that of their descendants.
const fullScreenStyles = css`
*:not(
.${EUI_DATA_GRID_FULL_SCREEN_CLASS}, .${EUI_DATA_GRID_FULL_SCREEN_CLASS} *,
[data-euiportal='true'],
[data-euiportal='true'] *
[data-euiportal='true'] *,
[data-kbn-preserve-zindex],
[data-kbn-preserve-zindex] *
) {
z-index: unset !important;
}
Expand Down
Loading