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

## 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](https://github.com/elastic/eui/pull/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
This commit is contained in:
Nick Peihl 2024-07-24 15:49:43 -04:00 committed by GitHub
parent 5b072c9aa8
commit e566abf1cb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -175,7 +175,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