[Security Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip displ…

…aying in the wrong place (elastic#204780)

**Resolves: elastic#203305
**Resolves: elastic#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**
<img width="1392" alt="Scherm­afbeelding 2024-12-18 om 15 57 20"
src="https://github.com/user-attachments/assets/d3087341-e5d2-45ca-83a3-70752fc026a4"
/>

**Chromium v118 after fix**
<img width="1392" alt="Scherm­afbeelding 2024-12-18 om 15 57 36"
src="https://github.com/user-attachments/assets/cbcfde0b-e571-4f35-a3cb-e4f35394c59b"
/>

Note: The darker backdrop in older Chromium is unrelated to this change.

Work started on 18-Dec-2024.

(cherry picked from commit 9b09335)

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;