From f8843c9a8ee67565829d225fdcb1b9e2ae4a4f0e Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 15 Mar 2023 10:06:57 -0700 Subject: [PATCH 1/2] Add workaround for EuiFocusTrap's `scrollLock` not working as expected --- src/core/public/styles/_base.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/core/public/styles/_base.scss b/src/core/public/styles/_base.scss index de138cdf402e6..1e8e6c7411e4d 100644 --- a/src/core/public/styles/_base.scss +++ b/src/core/public/styles/_base.scss @@ -34,3 +34,12 @@ .euiPageHeader--bottomBorder:not(.euiPageHeader--tabsAtBottom):not([class*='euiPageHeader--padding']) { padding-bottom: $euiSizeL; } + +// Kibana's body ignores the `margin-right !important` set by react-remove-scroll-bar +// (used by EUI's focus trap component & prevents page width jumps on full-screen overlays) +// due to the 100% width/min-width CSS set by Kibana in other places. To work around this, we +// grab the `--removed-body-scroll-bar-size` var added by the library & manually set `padding` +// TODO: Use `gapMode` instead once https://github.com/theKashey/react-focus-on/issues/65 is fixed +.kbnBody { + padding-right: var(--removed-body-scroll-bar-size, 0); +} From d59faae8ba79278d046871814c76a5f6a122feb8 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 15 Mar 2023 10:22:14 -0700 Subject: [PATCH 2/2] [TODO] Test behavior with Dashboard's panel flyouts --- .../panel_actions/customize_panel/customize_panel_action.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_panel/customize_panel_action.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_panel/customize_panel_action.tsx index ec6c2011ca53d..a5d8719b99c99 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_panel/customize_panel_action.tsx +++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_panel/customize_panel_action.tsx @@ -129,6 +129,8 @@ export class CustomizePanelAction implements Action { size: 's', 'data-test-subj': 'customizePanel', + // @ts-ignore - TODO: Remove this once https://github.com/elastic/eui/pull/6645 lands in Kibana + focusTrapProps: { scrollLock: true }, } ); overlayTracker?.openOverlay(handle);