[EuiFlyout] Preserve scrollbar width on body when EuiFlyout is open (…

…#6645)

* Fix EuiFlyouts to no longer cause page width jump on focus trap open

- `ownFocus={false}` and push flyouts should not focus/scroll lock

* [misc] Add scroll lock fixes to other fullscreen modes

* changelog

src/components/code/code_block_full_screen.tsx

@@ -101,7 +101,7 @@ export const EuiCodeBlockFullScreenWrapper: FunctionComponent = ({
 
   return (
     <EuiOverlayMask>
-      <EuiFocusTrap clickOutsideDisables={true}>
+      <EuiFocusTrap scrollLock preventScrollOnFocus clickOutsideDisables={true}>
         <div className="euiCodeBlockFullScreen" css={cssStyles}>
           {children}
         </div>

src/components/flyout/flyout.tsx

@@ -405,6 +405,7 @@ export const EuiFlyout = forwardRef(
     let flyout = (
       <EuiFocusTrap
         disabled={isPushed}
+        scrollLock={ownFocus}
         clickOutsideDisables={!ownFocus}
         onClickOutside={onClickOutside}
         {...focusTrapProps}

src/components/image/image_fullscreen_wrapper.tsx

@@ -68,7 +68,11 @@ export const EuiImageFullScreenWrapper: FunctionComponent<EuiImageWrapperProps>
 
   return (
     <EuiOverlayMask data-test-subj="fullScreenOverlayMask">
-      <EuiFocusTrap onClickOutside={closeFullScreen}>
+      <EuiFocusTrap
+        scrollLock
+        preventScrollOnFocus
+        onClickOutside={closeFullScreen}
+      >
         <>
           <figure
             aria-label={optionalCaptionText}

upcoming_changelogs/6645.md

@@ -0,0 +1,5 @@
+**Bug fixes**
+
+- Fixed `EuiFlyout` to preserve body scrollbar width on open
+- Fixed `EuiImage`'s full screen mode to not scroll jump & to preserve body scrollbar width on open
+- Fixed `EuiCodeBlock`'s full screen mode to not scroll jump & to preserve body scrollbar width on open