From b665651326db9d4e25ca7d230aac4aea0e4bc24a Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Mon, 20 Mar 2023 10:19:44 -0700
Subject: [PATCH] [EUI] Add `scrollLock` workaround CSS to Kibana's `body`
 (#153227)

## Summary

The `scrollLock` property on `EuiFocusTrap` "freezes" the width of the
of the body so that the removal/addition of the scrollbar when a full
screen focus trap opens (e.g. a modal, flyout, or other fullscreen mode)
doesn't cause the page width to jump/rerender.

It turns however, that this behavior (which sets a `margin-right` on the
`body` for the width of the scrollbar) does not work as expected in
Kibana due to its existing `width: 100%; min-width: 100%` CSS on its
`body`. As such, we need to temporarily work around this by setting
`padding-right` instead until
https://github.com/theKashey/react-focus-on/issues/65 is fixed.

d59faae can be reverted if not desired in this PR.

### Checklist

- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 src/core/public/styles/_base.scss                        | 9 +++++++++
 .../customize_panel/customize_panel_action.tsx           | 2 ++
 2 files changed, 11 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);
+}
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<CustomizePanelActionContext>
       {
         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);