diff --git a/src/core/packages/chrome/layout/core-chrome-layout-components/sidebar/layout_sidebar.tsx b/src/core/packages/chrome/layout/core-chrome-layout-components/sidebar/layout_sidebar.tsx index 15c6fb689fa58..f73b202cd267a 100644 --- a/src/core/packages/chrome/layout/core-chrome-layout-components/sidebar/layout_sidebar.tsx +++ b/src/core/packages/chrome/layout/core-chrome-layout-components/sidebar/layout_sidebar.tsx @@ -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} diff --git a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_global_app_style.tsx b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_global_app_style.tsx index 43e627ccb7593..4b851e46714fe 100644 --- a/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_global_app_style.tsx +++ b/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_global_app_style.tsx @@ -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')}; } `; }; diff --git a/src/platform/packages/shared/kbn-unified-data-table/src/hooks/use_full_screen_watcher.ts b/src/platform/packages/shared/kbn-unified-data-table/src/hooks/use_full_screen_watcher.ts index e349890b4533b..d526f9a307fe0 100644 --- a/src/platform/packages/shared/kbn-unified-data-table/src/hooks/use_full_screen_watcher.ts +++ b/src/platform/packages/shared/kbn-unified-data-table/src/hooks/use_full_screen_watcher.ts @@ -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; }