From 9b0933567f1ec8a210fd5c6f4c6c4e0592042c57 Mon Sep 17 00:00:00 2001 From: Nikita Indik Date: Wed, 18 Dec 2024 18:46:28 +0100 Subject: [PATCH] [Security Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip displaying in the wrong place (#204780) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **Resolves: https://github.com/elastic/kibana/issues/203305** **Resolves: https://github.com/elastic/kibana/issues/202206** ## Summary This PR fixes the ES|QL autosuggest tooltip displaying incorrectly in the Rule Upgrade flyout. The issue was caused by `EuiFlyoutBody` having `transform: translateZ(0);`, which created a new CSS stacking context and affected the positioning of fixed elements. This PR removes the transform to resolve the issue. ## Background The `transform: translateZ(0);` was originally [added](https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122) by EUI as a workaround for a Chrome bug that no longer reproduces. ## Testing The fix has been tested on: - Brave (Chromium v131, latest) - Chromium v118 (version on which the Chrome bug [occurred](https://issues.chromium.org/issues/40778541#comment13)) No issues were observed with the flyout in either version. ## Screenshots **Chromium v131 after fix** Scherm­afbeelding 2024-12-18 om 15 57 20 **Chromium v118 after fix** Scherm­afbeelding 2024-12-18 om 15 57 36 Note: The darker backdrop in older Chromium is unrelated to this change. Work started on 18-Dec-2024. --- .../components/rule_details/rule_details_flyout.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_details_flyout.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_details_flyout.tsx index 3425779926f7d..3909a9af5a60c 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_details_flyout.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_details_flyout.tsx @@ -40,6 +40,13 @@ const StyledEuiFlyoutBody = styled(EuiFlyoutBody)` display: flex; flex: 1; overflow: hidden; + /* + Removes "transform: translateZ(0)" from EuiFlyoutBody styles to avoid creating a new stacking context. + Fixed elements inside the flyout body are now correctly positioned relative to the viewport. + See: https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122 + The Chrome bug mentioned in the link above no longer reproduces, so this change is safe. + */ + transform: none; .euiFlyoutBody__overflowContent { flex: 1;