[CP Staging] Fix - Android - Expense - Extra space in Change workspace modal, not scrollable in landscape

src/components/CenteredModalLayout.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import type {MouseEvent} from 'react';
 import type {DimensionValue, StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
@@ -8,10 +7,9 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import isInLandscapeModeUtil from '@libs/isInLandscapeMode';
-import Overlay from '@libs/Navigation/AppNavigator/Navigators/Overlay';
 import CONST from '@src/CONST';
+import CenteredModalLayoutOverlay from './CenteredModalLayoutOverlay';
 import FocusTrapForScreen from './FocusTrap/FocusTrapForScreen';
-import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 
 type CenteredModalLayoutProps = {
     children: React.ReactNode;
@@ -42,27 +40,19 @@ function CenteredModalLayout({children, width, height, onBackdropPress, contentS
 
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ESCAPE, onBackdropPress, {shouldBubble: false});
 
-    const handleInnerClick = (e: MouseEvent) => e.stopPropagation();
-
     return (
         <>
-            <Overlay onPress={onBackdropPress} />
-            <PressableWithoutFeedback
-                onPress={onBackdropPress}
+            <CenteredModalLayoutOverlay onBackdropPress={onBackdropPress} />
+            <View
+                pointerEvents="box-none"
                 style={[styles.flex1, styles.alignItemsCenter, styles.getCenteredModalOuterView(shouldUseNarrowLayout)]}
-                accessible={false}
-                sentryLabel="CenteredModalLayout-backdrop"
             >
                 <FocusTrapForScreen>
-                    <View
-                        onStartShouldSetResponder={() => true}
-                        onClick={handleInnerClick}
-                        style={styles.getCenteredModalInnerView(shouldUseNarrowLayout, width, height)}
-                    >
+                    <View style={styles.getCenteredModalInnerView(shouldUseNarrowLayout, width, height)}>
                         <View style={safeAreaStyle}>{children}</View>
                     </View>
                 </FocusTrapForScreen>
-            </PressableWithoutFeedback>
+            </View>
         </>
     );
 }

src/components/CenteredModalLayoutOverlay/index.native.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import type CenteredModalLayoutOverlayProps from './types';
+
+/** On native the navigation `Overlay` can't back the modal, so we render a plain full-screen Pressable behind the card. */
+function CenteredModalLayoutOverlay({onBackdropPress}: CenteredModalLayoutOverlayProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    return (
+        <PressableWithoutFeedback
+            onPress={onBackdropPress}
+            style={styles.fullScreen}
+            accessibilityLabel={translate('common.close')}
+            role={CONST.ROLE.BUTTON}
+            id={CONST.OVERLAY.TOP_BUTTON_NATIVE_ID}
+            tabIndex={-1}
+            sentryLabel="CenteredModalLayout-backdrop"
+        />
+    );
+}
+
+export default CenteredModalLayoutOverlay;

src/components/CenteredModalLayoutOverlay/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Overlay from '@libs/Navigation/AppNavigator/Navigators/Overlay';
+import type CenteredModalLayoutOverlayProps from './types';
+
+/** On web the navigation `Overlay` is used as the backdrop. */
+function CenteredModalLayoutOverlay({onBackdropPress}: CenteredModalLayoutOverlayProps) {
+    return <Overlay onPress={onBackdropPress} />;
+}
+
+export default CenteredModalLayoutOverlay;

src/components/CenteredModalLayoutOverlay/types.ts

@@ -0,0 +1,6 @@
+type CenteredModalLayoutOverlayProps = {
+    /** Called when the backdrop (area outside the card) is pressed, before navigating back */
+    onBackdropPress: () => void;
+};
+
+export default CenteredModalLayoutOverlayProps;

src/pages/ChangePolicyEducationalModal.tsx

@@ -33,6 +33,7 @@ function ChangePolicyEducationalModal() {
         <CenteredModalLayout
             onBackdropPress={handleClose}
             width={variables.changePolicyEducationModalWidth}
+            contentStyle={[styles.pt0, styles.pb0]}
         >
             <FeatureTrainingContent
                 title={translate('iou.changePolicyEducational.title')}