[Links] Fix positioning of dragged link in links editor (#189122)

nickpeihl · nickpeihl · commit 7fd69286c65e · 2024-07-24T19:54:03.000Z
## Summary Fixes positioning of dragged links in the Links panel editor. The issue was caused by the `transform: translateZ(0)` workaround in EUI to fix a [mask image bug](elastic/eui#7855) in Chromium. We fix this by overriding the `transform` for in the `FlyoutBody` of the Links panel editor. Before: https://github.com/user-attachments/assets/8ad10732-dfaa-4464-845b-0a9c4fc6b173 After: https://github.com/user-attachments/assets/e6f0bffe-7eb0-4590-affc-a89bc86b973d (cherry picked from commit e566abf)
diff --git a/src/plugins/links/public/components/editor/links_editor.tsx b/src/plugins/links/public/components/editor/links_editor.tsx
@@ -173,7 +173,12 @@ const LinksEditor = ({
           </EuiFlexItem>
         </EuiFlexGroup>
       </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.
+        css={{ '.euiFlyoutBody__overflow': { transform: 'none' } }}
+      >
         <EuiForm fullWidth>
           <EuiFormRow label={LinksStrings.editor.panelEditor.getLayoutSettingsTitle()}>
             <EuiButtonGroup
