Skip to content

Commit a589276

Browse files
committed
[Security Solution][Bug] Timeline: ESQL query editor showing on fullScreen mode (#242027)
## Summary Fixes UI breaking when displaying **ESQL queries** in **Timeline full screen mode**. Closes #225998 ## 🛑 Problem When opening **Timeline** in full screen mode with an **ESQL query** (for example, one added from the **AI Assistant**), the UI layout breaks — some embedded **Discover** components (like `dscPageBody` or the **ESQL editor**) interfere visually with Timeline elements. ## 💡 Solution Added styling to correctly handle Discover’s full screen mode class (`UNIFIED_DATA_TABLE_FULL_SCREEN_CLASS`). Updated the TimelineESQLGlobalStyles to: Hide the `.ESQLEditor` when the unified data table is full screen This prevents layout conflicts between the embedded Discover components and Timeline’s own full screen mode. <details> <summary>Code change summary 🧩</summary> - Imported `UNIFIED_DATA_TABLE_FULL_SCREEN_CLASS` from `@kbn/unified-data-table/src/hooks/use_full_screen_watcher` - Replaced hard-coded class selector `.unifiedDataTable__fullScreen` with the imported constant - Added visibility rules for `.ESQLEditor` </details> <details> <summary>Screen recording / screenshot of fix ✅</summary> [Paste your video or screenshot here](https://github.com/user-attachments/assets/35fd54c8-3743-4a5d-9491-71b55e173c1a) </details> (cherry picked from commit 5805957)
1 parent 1a3f520 commit a589276

1 file changed

Lines changed: 5 additions & 1 deletion

File tree

  • x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/esql

x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/esql/styles.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
*/
77

88
import styled from '@emotion/styled';
9+
import { UNIFIED_DATA_TABLE_FULL_SCREEN_CLASS } from '@kbn/unified-data-table/src/hooks/use_full_screen_watcher';
910
import { createGlobalStyle } from 'styled-components';
1011

1112
export const EmbeddedDiscoverContainer = styled.div`
@@ -23,7 +24,10 @@ export const TimelineESQLGlobalStyles = createGlobalStyle`
2324
}
2425
2526
// TODO this should be removed when we change the ES|QL tab to be our own component instead of Discover (hopefully 8.15)
26-
.unifiedDataTable__fullScreen .dscPageBody * {
27+
.${UNIFIED_DATA_TABLE_FULL_SCREEN_CLASS} .dscPageBody * {
2728
z-index: unset !important;
2829
}
30+
.${UNIFIED_DATA_TABLE_FULL_SCREEN_CLASS} .ESQLEditor {
31+
visibility: hidden;
32+
}
2933
`;

0 commit comments

Comments
 (0)