[Lens] Fix Firefox inline editor scroll (#228625)

nickofthyme · mbondyra · nickofthyme · commit cddb241be8a5 · 2025-07-21T13:06:37.000-05:00
## Summary Fixes an issues in Firefox where the Lens flyout configuration was not scrollable. https://github.com/user-attachments/assets/e8e57fc6-b2c8-4354-be17-d41cb42317df Fixes #227939 ### Checklist - [ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
diff --git a/x-pack/platform/plugins/shared/lens/public/app_plugin/shared/edit_on_the_fly/get_edit_lens_configuration.tsx b/x-pack/platform/plugins/shared/lens/public/app_plugin/shared/edit_on_the_fly/get_edit_lens_configuration.tsx
@@ -114,7 +114,7 @@ const MaybeWrapper = ({
       size="s"
       hideCloseButton
       css={css`
-        clip-path: polygon(-100% 0, 100% 0, 100% 100%, -100% 100%);
+        clip-path: none; // needed to override the eui-flyout clip-path for dnd outside of the flyout
       `}
     >
       {children}
diff --git a/x-pack/platform/plugins/shared/lens/public/trigger_actions/open_lens_config/helpers.scss b/x-pack/platform/plugins/shared/lens/public/trigger_actions/open_lens_config/helpers.scss
@@ -1,12 +1,9 @@
-// styles needed to display extra drop targets that are outside of the config panel main area while also allowing to scroll vertically
 .lnsConfigPanel__overlay {
-  clip-path: polygon(-100% 0, 100% 0, 100% 100%, -100% 100%);
+  clip-path: none; // needed to override the eui-flyout clip-path for dnd outside of the flyout
   max-inline-size: $euiSizeXXL * 20;
   min-inline-size: $euiSizeXXL * 8;
   background: $euiColorBackgroundBaseSubdued;
-  @include euiBreakpoint('xs', 's', 'm') {
-    clip-path: none;
-  }
+
   .kbnOverlayMountWrapper {
     padding-left: $euiFormMaxWidth;
     margin-left: -$euiFormMaxWidth;

Original file line number	Diff line number	Diff line change
`@@ -114,7 +114,7 @@ const MaybeWrapper = ({`
`114`	`114`	`size="s"`
`115`	`115`	`hideCloseButton`
`116`	`116`	css={css`
`117`		`- clip-path: polygon(-100% 0, 100% 0, 100% 100%, -100% 100%);`
	`117`	`+ clip-path: none; // needed to override the eui-flyout clip-path for dnd outside of the flyout`
`118`	`118`	`}
`119`	`119`	`>`
`120`	`120`	`{children}`