[8.x] [Security Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip…

… displaying in the wrong place (#204780) (#204817)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Security Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip
displaying in the wrong place
(#204780)](#204780)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nikita
Indik","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-12-18T17:46:28Z","message":"[Security
Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip displaying in the
wrong place (#204780)\n\n**Resolves:
https://github.com/elastic/kibana/issues/203305**\n**Resolves:
https://github.com/elastic/kibana/issues/202206**\n\n## Summary\nThis PR
fixes the ES|QL autosuggest tooltip displaying incorrectly in\nthe Rule
Upgrade flyout. The issue was caused by `EuiFlyoutBody`
having\n`transform: translateZ(0);`, which created a new CSS stacking
context\nand affected the positioning of fixed elements. This PR removes
the\ntransform to resolve the issue.\n\n## Background\nThe `transform:
translateZ(0);` was
originally\n[added](https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122)\nby
EUI as a workaround for a Chrome bug that no longer reproduces.\n\n##
Testing\nThe fix has been tested on:\n - Brave (Chromium v131,
latest)\n- Chromium v118 (version on which the Chrome
bug\n[occurred](https://issues.chromium.org/issues/40778541#comment13))\n\nNo
issues were observed with the flyout in either version.\n\n##
Screenshots\n**Chromium v131 after fix**\n<img width=\"1392\"
alt=\"Scherm­afbeelding 2024-12-18 om 15 57
20\"\nsrc=\"https://github.com/user-attachments/assets/d3087341-e5d2-45ca-83a3-70752fc026a4\"\n/>\n\n**Chromium
v118 after fix**\n<img width=\"1392\" alt=\"Scherm­afbeelding 2024-12-18
om 15 57
36\"\nsrc=\"https://github.com/user-attachments/assets/cbcfde0b-e571-4f35-a3cb-e4f35394c59b\"\n/>\n\nNote:
The darker backdrop in older Chromium is unrelated to this
change.\n\nWork started on
18-Dec-2024.","sha":"9b0933567f1ec8a210fd5c6f4c6c4e0592042c57","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Detections
and Resp","Team: SecuritySolution","Feature:Rule
Management","Team:Detection Rule Management","Feature:Prebuilt Detection
Rules","backport:version","v8.18.0"],"title":"[Security Solution] Rule
Upgrade: Fix ES|QL autosuggest tooltip displaying in the wrong
place","number":204780,"url":"https://github.com/elastic/kibana/pull/204780","mergeCommit":{"message":"[Security
Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip displaying in the
wrong place (#204780)\n\n**Resolves:
https://github.com/elastic/kibana/issues/203305**\n**Resolves:
https://github.com/elastic/kibana/issues/202206**\n\n## Summary\nThis PR
fixes the ES|QL autosuggest tooltip displaying incorrectly in\nthe Rule
Upgrade flyout. The issue was caused by `EuiFlyoutBody`
having\n`transform: translateZ(0);`, which created a new CSS stacking
context\nand affected the positioning of fixed elements. This PR removes
the\ntransform to resolve the issue.\n\n## Background\nThe `transform:
translateZ(0);` was
originally\n[added](https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122)\nby
EUI as a workaround for a Chrome bug that no longer reproduces.\n\n##
Testing\nThe fix has been tested on:\n - Brave (Chromium v131,
latest)\n- Chromium v118 (version on which the Chrome
bug\n[occurred](https://issues.chromium.org/issues/40778541#comment13))\n\nNo
issues were observed with the flyout in either version.\n\n##
Screenshots\n**Chromium v131 after fix**\n<img width=\"1392\"
alt=\"Scherm­afbeelding 2024-12-18 om 15 57
20\"\nsrc=\"https://github.com/user-attachments/assets/d3087341-e5d2-45ca-83a3-70752fc026a4\"\n/>\n\n**Chromium
v118 after fix**\n<img width=\"1392\" alt=\"Scherm­afbeelding 2024-12-18
om 15 57
36\"\nsrc=\"https://github.com/user-attachments/assets/cbcfde0b-e571-4f35-a3cb-e4f35394c59b\"\n/>\n\nNote:
The darker backdrop in older Chromium is unrelated to this
change.\n\nWork started on
18-Dec-2024.","sha":"9b0933567f1ec8a210fd5c6f4c6c4e0592042c57"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/204780","number":204780,"mergeCommit":{"message":"[Security
Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip displaying in the
wrong place (#204780)\n\n**Resolves:
https://github.com/elastic/kibana/issues/203305**\n**Resolves:
https://github.com/elastic/kibana/issues/202206**\n\n## Summary\nThis PR
fixes the ES|QL autosuggest tooltip displaying incorrectly in\nthe Rule
Upgrade flyout. The issue was caused by `EuiFlyoutBody`
having\n`transform: translateZ(0);`, which created a new CSS stacking
context\nand affected the positioning of fixed elements. This PR removes
the\ntransform to resolve the issue.\n\n## Background\nThe `transform:
translateZ(0);` was
originally\n[added](https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122)\nby
EUI as a workaround for a Chrome bug that no longer reproduces.\n\n##
Testing\nThe fix has been tested on:\n - Brave (Chromium v131,
latest)\n- Chromium v118 (version on which the Chrome
bug\n[occurred](https://issues.chromium.org/issues/40778541#comment13))\n\nNo
issues were observed with the flyout in either version.\n\n##
Screenshots\n**Chromium v131 after fix**\n<img width=\"1392\"
alt=\"Scherm­afbeelding 2024-12-18 om 15 57
20\"\nsrc=\"https://github.com/user-attachments/assets/d3087341-e5d2-45ca-83a3-70752fc026a4\"\n/>\n\n**Chromium
v118 after fix**\n<img width=\"1392\" alt=\"Scherm­afbeelding 2024-12-18
om 15 57
36\"\nsrc=\"https://github.com/user-attachments/assets/cbcfde0b-e571-4f35-a3cb-e4f35394c59b\"\n/>\n\nNote:
The darker backdrop in older Chromium is unrelated to this
change.\n\nWork started on
18-Dec-2024.","sha":"9b0933567f1ec8a210fd5c6f4c6c4e0592042c57"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Nikita Indik <[email protected]>

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;