Skip to content

Commit

Permalink
[Links] Fix positioning of dragged link in links editor (elastic#189122)
Browse files Browse the repository at this point in the history
## 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
  • Loading branch information
nickpeihl authored Jul 24, 2024
1 parent 5b072c9 commit e566abf
Showing 1 changed file with 6 additions and 1 deletion.
7 changes: 6 additions & 1 deletion src/plugins/links/public/components/editor/links_editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit e566abf

Please sign in to comment.