[Security Solution] bump Timeline, document and timeline flyout components' z-index by 1 to be on top of side nav (#236655)

## Summary

This PR an issue that has been present for a few months: the side nav in
Security Solution is rendered on top of the expandable flyout.
This issue comes from [this
change](https://github.com/elastic/eui/blob/main/packages/eui/src/components/header/header.styles.ts)
introduced by [this PR](elastic/eui#8325) a few
months ago in EUI.

The changes suggested here are:
- bump the document flyout's `z-index` from `1000` to `1001`
- bump the Timeline modal's `z-index` from `1001` to `1002`
- bump the timeline flyout's `z-index` from `1002` to `1003`
- bump all the related flyouts' `z-index` from `1003` to `1004`

Thankfully when we had made a similar change over a year ago we had
marked all the related flyouts with the following comment
`// EUI TODO: This z-index override of EuiOverlayMask is a workaround,
and ideally should be resolved with a cleaner UI/UX flow long-term`
So it was easy to find them.

This is not an ideal fix (obviously it was already not an ideal fix over
a year ago) but this will quickly get us back to a better UX, as
currently if the flyout opens behind the side nav, users can't resize
them at all because the handle to resize is hidden...

| Before  | After |
| ------------- | ------------- |
| <img width="1597" height="1062" alt="Screenshot 2025-09-26 at 3 08
50 PM"
src="https://github.com/user-attachments/assets/09502b54-9120-4c9b-88e6-b956a2a3d4dd"
/> | <img width="1596" height="1061" alt="Screenshot 2025-09-26 at 3 02
36 PM"
src="https://github.com/user-attachments/assets/02ad729a-697e-4eeb-a632-ff29705e00cf"
/> |

## What to test

- make sure that the security solution flyout is always on top of the
side nav
- make sure that Timeline is always on top of the security solution
flyout
- make sure that the timeline flyout is always on top of Timeline
- make sure that the flyout on the ESQL tab in Timeline behaves
correctly
- make sure these work after a page refresh
- make sure that things work both with overlay and push modes
- make sure that all secondary flyouts - accessible via the Take action
button in the flyout's footer - are displayed on top.
  - Add to new case
  - Isolate host
  - Respond
  - Add endpoint exception
  - Add rule exception
  - ...

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

Author: PhilippeOberti

src/platform/plugins/shared/data_view_editor/public/open_editor.tsx

@@ -9,8 +9,7 @@
 
 import React from 'react';
 import type { CoreStart, OverlayRef } from '@kbn/core/public';
-import type { DataViewsServicePublic } from '@kbn/data-views-plugin/public';
-import type { DataView } from '@kbn/data-views-plugin/public';
+import type { DataView, DataViewsServicePublic } from '@kbn/data-views-plugin/public';
 
 import { toMountPoint } from '@kbn/react-kibana-mount';
 import type { DataPublicPluginStart } from './shared_imports';
@@ -93,9 +92,9 @@ export const getEditorOpener =
         {
           hideCloseButton: true,
           size: 'l',
+          // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
           maskProps: {
-            // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
-            style: 'z-index: 1003', // we need this flyout to be above the timeline flyout (which has a z-index of 1002)
+            style: 'z-index: 1004', // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
           },
           'aria-labelledby': 'dataViewEditorFlyoutTitle',
         }

src/platform/plugins/shared/data_view_field_editor/public/open_editor.tsx

@@ -16,15 +16,14 @@ import { euiFlyoutClassname } from './constants';
 import type { ApiService } from './lib/api';
 import type {
   DataPublicPluginStart,
-  UsageCollectionStart,
-  RuntimeType,
+  DataView,
+  DataViewField,
   DataViewsPublicPluginStart,
   FieldFormatsStart,
-  DataViewField,
-  DataView,
+  RuntimeType,
+  UsageCollectionStart,
 } from './shared_imports';
-import { DataViewLazy } from './shared_imports';
-import { createKibanaReactContext } from './shared_imports';
+import { createKibanaReactContext, DataViewLazy } from './shared_imports';
 import type { CloseEditor, Field, InternalFieldType, PluginStart } from './types';
 
 /**
@@ -246,7 +245,7 @@ export const getFieldEditorOpener =
           maskProps: {
             className: 'indexPatternFieldEditorMaskOverlay',
             // // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
-            style: 'z-index: 1003', // we need this flyout to be above the timeline flyout (which has a z-index of 1002)
+            style: 'z-index: 1004', // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
           },
         }
       );

x-pack/platform/plugins/shared/cases/public/components/create/flyout/create_case_flyout.tsx

@@ -5,9 +5,9 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { css } from '@emotion/react';
-import { EuiFlyout, EuiFlyoutHeader, EuiTitle, EuiFlyoutBody, useEuiTheme } from '@elastic/eui';
+import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, EuiTitle, useEuiTheme } from '@elastic/eui';
 
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { noop } from 'lodash';
@@ -43,7 +43,12 @@ export const CreateCaseFlyout = React.memo<CreateCaseFlyoutProps>(
   }) => {
     const handleCancel = onClose || noop;
     const handleOnSuccess = onSuccess || noop;
+
     const { euiTheme } = useEuiTheme();
+    const maskProps = useMemo(
+      () => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
+      [euiTheme.levels.flyout]
+    );
 
     return (
       <>
@@ -54,7 +59,7 @@ export const CreateCaseFlyout = React.memo<CreateCaseFlyoutProps>(
           aria-label={i18n.CREATE_CASE_LABEL}
           data-test-subj="create-case-flyout"
           // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
-          maskProps={{ style: `z-index: ${(euiTheme.levels.flyout as number) + 3}` }} // we need this flyout to be above the timeline flyout (which has a z-index of 1002)
+          maskProps={maskProps}
         >
           <EuiFlyoutHeader data-test-subj="create-case-flyout-header" hasBorder>
             <EuiTitle size="m">

x-pack/platform/plugins/shared/osquery/public/live_queries/form/query_details_flyout.tsx

@@ -6,14 +6,14 @@
  */
 
 import {
+  EuiCodeBlock,
+  EuiFlexItem,
   EuiFlyout,
-  EuiTitle,
   EuiFlyoutBody,
   EuiFlyoutHeader,
   EuiPortal,
-  EuiFlexItem,
-  EuiCodeBlock,
   EuiSpacer,
+  EuiTitle,
   useEuiTheme,
 } from '@elastic/eui';
 import React, { useMemo } from 'react';
@@ -29,10 +29,8 @@ interface QueryDetailsFlyoutProps {
 
 const QueryDetailsFlyoutComponent: React.FC<QueryDetailsFlyoutProps> = ({ action, onClose }) => {
   const { euiTheme } = useEuiTheme();
-
-  // we need this flyout to be above the timeline flyout (which has a z-index of 1002)
   const maskProps = useMemo(
-    () => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 3}` }),
+    () => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
     [euiTheme.levels.flyout]
   );
 

x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_exceptions/components/add_exception_flyout/index.tsx

@@ -5,52 +5,52 @@
  * 2.0.
  */
 
-import React, { memo, useEffect, useCallback, useMemo, useReducer, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { isEmpty } from 'lodash/fp';
 
 import {
+  EuiButton,
+  EuiCallOut,
   EuiFlyout,
-  EuiTitle,
   EuiFlyoutBody,
-  EuiButton,
   EuiHorizontalRule,
-  EuiSpacer,
   EuiSkeletonText,
-  EuiCallOut,
+  EuiSpacer,
   EuiText,
+  EuiTitle,
   useEuiTheme,
   useGeneratedHtmlId,
 } from '@elastic/eui';
 
 import { ENDPOINT_LIST_ID } from '@kbn/securitysolution-list-constants';
+import type { ExceptionListSchema, OsTypeArray } from '@kbn/securitysolution-io-ts-list-types';
 import { ExceptionListTypeEnum } from '@kbn/securitysolution-io-ts-list-types';
-import type { OsTypeArray, ExceptionListSchema } from '@kbn/securitysolution-io-ts-list-types';
-import {
-  hasWrongOperatorWithWildcard,
-  hasPartialCodeSignatureEntry,
-} from '@kbn/securitysolution-list-utils';
 import type {
   ExceptionsBuilderExceptionItem,
   ExceptionsBuilderReturnExceptionItem,
 } from '@kbn/securitysolution-list-utils';
+import {
+  hasPartialCodeSignatureEntry,
+  hasWrongOperatorWithWildcard,
+} from '@kbn/securitysolution-list-utils';
 
 import {
-  WildCardWithWrongOperatorCallout,
   PartialCodeSignatureCallout,
+  WildCardWithWrongOperatorCallout,
 } from '@kbn/securitysolution-exception-list-components';
 import type { Moment } from 'moment';
 import type { Status } from '../../../../../common/api/detection_engine';
 import * as i18n from './translations';
 import { ExceptionItemComments } from '../item_comments';
 import {
   defaultEndpointExceptionItems,
-  retrieveAlertOsTypes,
   getPrepopulatedRuleExceptionWithHighlightFields,
+  retrieveAlertOsTypes,
 } from '../../utils/helpers';
-import { RULE_EXCEPTION, ENDPOINT_EXCEPTION } from '../../utils/translations';
+import { ENDPOINT_EXCEPTION, RULE_EXCEPTION } from '../../utils/translations';
 import type { AlertData } from '../../utils/types';
-import { initialState, createExceptionItemsReducer } from './reducer';
+import { createExceptionItemsReducer, initialState } from './reducer';
 import { ExceptionsFlyoutMeta } from '../flyout_components/item_meta_form';
 import { ExceptionsConditions } from '../flyout_components/item_conditions';
 import { useFetchIndexPatterns } from '../../logic/use_exception_flyout_data';
@@ -114,6 +114,11 @@ export const AddExceptionFlyout = memo(function AddExceptionFlyout({
   onConfirm,
 }: AddExceptionFlyoutProps) {
   const { euiTheme } = useEuiTheme();
+  const maskProps = useMemo(
+    () => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
+    [euiTheme.levels.flyout]
+  );
+
   const [showConfirmModal, setShowConfirmModal] = useState<boolean>(false);
   const { isLoading, indexPatterns, getExtendedFields } = useFetchIndexPatterns(rules);
   const [isSubmitting, submitNewExceptionItems] = useAddNewExceptionItems();
@@ -516,7 +521,7 @@ export const AddExceptionFlyout = memo(function AddExceptionFlyout({
       data-test-subj="addExceptionFlyout"
       aria-labelledby={exceptionFlyoutTitleId}
       // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
-      maskProps={{ style: `z-index: ${(euiTheme.levels.flyout as number) + 3}` }} // we need this flyout to be above the timeline flyout (which has a z-index of 1002)
+      maskProps={maskProps}
     >
       <ExceptionFlyoutHeader
         listType={listType}
@@ -536,6 +541,7 @@ export const AddExceptionFlyout = memo(function AddExceptionFlyout({
         {errorSubmitting != null && (
           <>
             <EuiCallOut
+              announceOnMount
               data-test-subj="addExceptionErrorCallOut"
               title={i18n.SUBMIT_ERROR_TITLE}
               color="danger"

x-pack/solutions/security/plugins/security_solution/public/detections/components/osquery/osquery_flyout.tsx

@@ -9,8 +9,8 @@ import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 import {
   EuiFlyout,
-  EuiFlyoutFooter,
   EuiFlyoutBody,
+  EuiFlyoutFooter,
   EuiFlyoutHeader,
   EuiTitle,
   useEuiTheme,
@@ -48,10 +48,8 @@ const OsqueryFlyoutComponent: React.FC<OsqueryFlyoutProps> = ({
   ecsData,
 }) => {
   const { euiTheme } = useEuiTheme();
-
-  // we need this flyout to be above the timeline flyout (which has a z-index of 1002)
   const maskProps = useMemo(
-    () => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 3}` }),
+    () => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
     [euiTheme.levels.flyout]
   );
 

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/take_action_button.tsx

@@ -8,7 +8,7 @@
 import type { FC } from 'react';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
-import { useEuiTheme, EuiFlyout } from '@elastic/eui';
+import { EuiFlyout, useEuiTheme } from '@elastic/eui';
 import { find } from 'lodash/fp';
 import { useBasicDataFromDetailsData } from '../hooks/use_basic_data_from_details_data';
 import type { Status } from '../../../../../common/api/detection_engine';
@@ -25,6 +25,7 @@ import { isActiveTimeline } from '../../../../helpers';
 import { useEventFilterModal } from '../../../../detections/components/alerts_table/timeline_actions/use_event_filter_modal';
 import { IsolateHostPanelHeader } from '../../isolate_host/header';
 import { IsolateHostPanelContent } from '../../isolate_host/content';
+
 interface AlertSummaryData {
   /**
    * Status of the alert (open, closed...)
@@ -53,9 +54,8 @@ interface AlertSummaryData {
  */
 export const TakeActionButton: FC = () => {
   const { euiTheme } = useEuiTheme();
-  // we need this flyout to be above the timeline flyout (which has a z-index of 1002)
-  const flyoutZIndex = useMemo(
-    () => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 3}` }),
+  const maskProps = useMemo(
+    () => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
     [euiTheme]
   );
 
@@ -190,7 +190,7 @@ export const TakeActionButton: FC = () => {
           data={dataAsNestedObject}
           onCancel={closeAddEventFilterModal}
           // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
-          maskProps={flyoutZIndex} // we need this flyout to be above the timeline flyout (which has a z-index of 1002)
+          maskProps={maskProps}
         />
       )}
 
@@ -205,7 +205,7 @@ export const TakeActionButton: FC = () => {
 
       {isHostIsolationPanelOpen && (
         // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
-        <EuiFlyout onClose={showAlertDetails} size="m" maskProps={flyoutZIndex}>
+        <EuiFlyout onClose={showAlertDetails} size="m" maskProps={maskProps}>
           <IsolateHostPanelHeader
             isolateAction={isolateAction}
             data={dataFormattedForFieldBrowser}

x-pack/solutions/security/plugins/security_solution/public/flyout/index.tsx

@@ -65,9 +65,9 @@ import { HostDetailsPanel, HostDetailsPanelKey } from './entity_details/host_det
 import type { AnalyzerPanelExpandableFlyoutProps } from './document_details/analyzer_panels';
 import { AnalyzerPanel } from './document_details/analyzer_panels';
 import {
+  GenericEntityPanelKey,
   HostPanelKey,
   ServicePanelKey,
-  GenericEntityPanelKey,
   UserPanelKey,
 } from './entity_details/shared/constants';
 import type { ServicePanelExpandableFlyoutProps } from './entity_details/service_right';
@@ -281,11 +281,13 @@ export const TIMELINE_ON_CLOSE_EVENT = `expandable-flyout-on-close-${Flyouts.tim
 
 /**
  * Flyout used for the Security Solution application
- * We keep the default EUI 1000 z-index to ensure it is always rendered behind Timeline (which has a z-index of 1001)
+ * We keep the default EUI 1001 z-index to ensure it is always rendered behind Timeline (which has a z-index of 1002)
  * We propagate the onClose callback to the rest of Security Solution using a window event 'expandable-flyout-on-close-SecuritySolution'
  * This flyout support push/overlay mode. The value is saved in local storage.
  */
 export const SecuritySolutionFlyout = memo(() => {
+  const { euiTheme } = useEuiTheme();
+
   const onClose = useCallback(
     () =>
       window.dispatchEvent(
@@ -300,6 +302,7 @@ export const SecuritySolutionFlyout = memo(() => {
     <ExpandableFlyout
       registeredPanels={expandableFlyoutDocumentsPanels}
       paddingSize="none"
+      customStyles={{ 'z-index': (euiTheme.levels.flyout as number) + 1 }}
       onClose={onClose}
     />
   );
@@ -309,7 +312,7 @@ SecuritySolutionFlyout.displayName = 'SecuritySolutionFlyout';
 
 /**
  * Flyout used in Timeline
- * We set the z-index to 1002 to ensure it is always rendered above Timeline (which has a z-index of 1001)
+ * We set the z-index to 1003 to ensure it is always rendered above Timeline (which has a z-index of 1002)
  * We propagate the onClose callback to the rest of Security Solution using a window event 'expandable-flyout-on-close-Timeline'
  * This flyout does not support push mode, because timeline being rendered in a modal (EUiPortal), it's very difficult to dynamically change its width.
  */
@@ -330,7 +333,7 @@ export const TimelineFlyout = memo(() => {
     <ExpandableFlyout
       registeredPanels={expandableFlyoutDocumentsPanels}
       paddingSize="none"
-      customStyles={{ 'z-index': (euiTheme.levels.flyout as number) + 2 }}
+      customStyles={{ 'z-index': (euiTheme.levels.flyout as number) + 3 }}
       onClose={onClose}
       flyoutCustomProps={{
         pushVsOverlay: {

x-pack/solutions/security/plugins/security_solution/public/management/components/endpoint_responder/components/action_log_button.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { memo, useCallback, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import {
   EuiButton,
   EuiFlyout,
@@ -22,6 +22,11 @@ import { UX_MESSAGES } from '../../endpoint_response_actions_list/translations';
 
 export const ActionLogButton = memo<EndpointResponderExtensionComponentProps>((props) => {
   const { euiTheme } = useEuiTheme();
+  const maskProps = useMemo(
+    () => ({ style: `z-index: ${(euiTheme.levels.flyout as number) + 4}` }), // we need this flyout to be above the timeline flyout (which has a z-index of 1003)
+    [euiTheme]
+  );
+
   const [showActionLogFlyout, setShowActionLogFlyout] = useState<boolean>(false);
   const toggleActionLog = useCallback(() => {
     setShowActionLogFlyout((prevState) => {
@@ -54,7 +59,7 @@ export const ActionLogButton = memo<EndpointResponderExtensionComponentProps>((p
           aria-labelledby={responderActionLogFlyoutTitleId}
           data-test-subj="responderActionLogFlyout"
           // EUI TODO: This z-index override of EuiOverlayMask is a workaround, and ideally should be resolved with a cleaner UI/UX flow long-term
-          maskProps={{ style: `z-index: ${(euiTheme.levels.flyout as number) + 3}` }} // we need this flyout to be above the timeline flyout (which has a z-index of 1002)
+          maskProps={maskProps}
         >
           <EuiFlyoutHeader hasBorder>
             <EuiTitle size="m">

x-pack/solutions/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx

@@ -8,12 +8,12 @@ import React from 'react';
 import { css } from '@emotion/css';
 import { Global } from '@emotion/react';
 import {
-  useEuiTheme,
   euiAnimFadeIn,
-  transparentize,
+  euiAnimSlideInUp,
   euiBackgroundColor,
   euiCanAnimate,
-  euiAnimSlideInUp,
+  transparentize,
+  useEuiTheme,
 } from '@elastic/eui';
 
 export const usePaneStyles = () => {
@@ -30,7 +30,7 @@ export const usePaneStyles = () => {
     // TODO EUI: add color with transparency
     background: ${transparentize(euiTheme.colors.ink, 0.5)};
     z-index: ${(euiTheme.levels.flyout as number) +
-    1}; // this z-index needs to be between the eventFlyout (set at 1000) and the timelineFlyout (set at 1002)
+    2}; // this z-index needs to be between the documentFlyout (set at 1001) and the timelineFlyout (set at 1003)
 
     ${euiCanAnimate} {
       animation: ${euiAnimFadeIn} ${euiTheme.animation.fast} ease-in;