using new class to target only the Discover flyout

elastic · May 2, 2024 · e8f225d · e8f225d
1 parent a1cf66f
commit e8f225d
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
@@ -222,6 +222,7 @@ export function DiscoverGridFlyout({
   return (
     <EuiPortal>
       <EuiFlyoutResizable
+        className="DiscoverFlyout" // used to override the z-index of the flyout from SecuritySolution
         onClose={onClose}
         type="push"
         size={flyoutWidth}

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/esql/styles.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/esql/styles.tsx
@@ -16,8 +16,9 @@ export const EmbeddedDiscoverContainer = styled.div`
   place-items: center
 `;
 
+// TODO remember to remove the className added to discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx when removing this
 export const TimelineESQLGlobalStyles = createGlobalStyle`
-  body:has(.timeline-portal-overlay-mask) .euiFlyout {
+  body:has(.timeline-portal-overlay-mask) .DiscoverFlyout {
     z-index: 1002; // For its usage in the Security Solution timeline, we need Discover flyout to be above the timeline flyout (which has a z-index of 1001)
   }
 `;