[SIEM migrations] ES|QL editor: Broken suggestions menu (#11535) (#210603)

## Summary

These changes fix the issue with the shifted suggestion menu of the
ES|QL editor integrated inside the flyout.

This is just a workaround and we will need to remove this once the issue
is fixed by EUI team. Here is the ticket to track:
https://github.com/elastic/eui/issues/8269

**More details regarding the fix**:
Slack conversation: [internal
link](https://elastic.slack.com/archives/C7QC1JV6F/p1736501365531779)

### Screenshots

**Before the fix**

<img width="1653" alt="Screenshot 2025-02-11 at 15 51 42"
src="https://github.com/user-attachments/assets/4925a706-0c31-4730-b37f-acf3bbd0447c"
/>

**After the fix**

<img width="1651" alt="Screenshot 2025-02-11 at 15 52 19"
src="https://github.com/user-attachments/assets/475d45d2-cb42-4a46-ae5c-6e8cef874b40"
/>

x-pack/solutions/security/plugins/security_solution/public/siem_migrations/rules/components/rule_details_flyout/index.tsx

@@ -244,7 +244,14 @@ export const MigrationRuleDetailsFlyout: React.FC<MigrationRuleDetailsFlyoutProp
           <EuiSpacer size="s" />
           <UpdatedByLabel ruleMigration={ruleMigration} />
         </EuiFlyoutHeader>
-        <EuiFlyoutBody>
+        <EuiFlyoutBody
+          // EUI TODO: We need to set transform to 'none' to avoid drag/drop issues in the flyout caused by the
+          // `transform: translateZ(0)` workaround for the mask image bug in Chromium.
+          // https://github.com/elastic/eui/pull/7855.
+          // We need to remove this workaround once it is fixed in EUI:
+          // https://github.com/elastic/eui/issues/8269.
+          css={{ '.euiFlyoutBody__overflow': { transform: 'none' } }}
+        >
           <EuiSkeletonLoading
             isLoading={isLoading}
             loadingContent={