Fix mWeb landscape layout

src/components/SidePanel/SidePanelModal/index.tsx

@@ -27,7 +27,7 @@ import type SidePanelModalProps from './types';
 function SidePanelModal({children, sidePanelTranslateX, closeSidePanel, shouldHideSidePanelBackdrop}: SidePanelModalProps) {
     const styles = useThemeStyles();
     const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
-    const {paddingTop, paddingBottom} = useSafeAreaPaddings();
+    const {paddingTop, paddingBottom, paddingLeft, paddingRight} = useSafeAreaPaddings();
 
     const [isRHPVisible = false] = useOnyx(ONYXKEYS.MODAL, {selector: isRHPVisibleSelector});
     const uniqueModalId = ComposerFocusManager.getId();
@@ -85,7 +85,7 @@ function SidePanelModal({children, sidePanelTranslateX, closeSidePanel, shouldHi
                                 styles.sidePanelContent,
                                 styles.sidePanelContentWidth(shouldUseNarrowLayout),
                                 styles.sidePanelContentBorderWidth(isExtraLargeScreenWidth),
-                                {transform: [{translateX: sidePanelTranslateX.current}], paddingTop, paddingBottom},
+                                {transform: [{translateX: sidePanelTranslateX.current}], paddingTop, paddingBottom, paddingLeft, paddingRight},
                             ]}
                         >
                             {children}

src/hooks/useIsInLandscapeMode/index.ts

@@ -1,8 +1,15 @@
+import useWindowDimensions from '@hooks/useWindowDimensions';
+
+import isInLandscapeMode from '@libs/isInLandscapeMode';
 /**
- * We only want to change UI according to the landscape mode on native platforms.
+ * Returns whether mWeb is currently in landscape orientation.
+ * If component already uses useResponsiveLayout, it will return the value from that hook.
+ * If component already uses useWindowDimensions, use @libs/isInLandscapeMode instead.
  */
 function useIsInLandscapeMode(): boolean {
-    return false;
+    const {windowWidth, windowHeight} = useWindowDimensions();
+
+    return isInLandscapeMode(windowWidth, windowHeight);
 }
 
 export default useIsInLandscapeMode;

src/hooks/useResponsiveLayout/index.ts

@@ -2,6 +2,8 @@ import ModalContext from '@components/Modal/ModalContext';
 
 import useWindowDimensions from '@hooks/useWindowDimensions';
 
+import isInLandscapeModeUtil from '@libs/isInLandscapeMode';
+
 import variables from '@styles/variables';
 
 import CONST from '@src/CONST';
@@ -31,12 +33,14 @@ import type ResponsiveLayoutResult from './types';
 export default function useResponsiveLayout(): ResponsiveLayoutResult {
     const {windowWidth, windowHeight} = useWindowDimensions();
 
+    const isInLandscapeMode = isInLandscapeModeUtil(windowWidth, windowHeight);
+
     // When the soft keyboard opens on mWeb, the window height changes. Use static screen height instead to get real screenHeight.
     const screenHeight = Dimensions.get('screen').height;
     const isExtraSmallScreenHeight = screenHeight <= variables.extraSmallMobileResponsiveHeightBreakpoint;
-    const isSmallScreenWidth = windowWidth <= variables.mobileResponsiveWidthBreakpoint;
+    const isSmallScreenWidth = windowWidth <= variables.mobileResponsiveWidthBreakpoint || isInLandscapeMode;
     const isMediumScreenWidth = windowWidth > variables.mobileResponsiveWidthBreakpoint && windowWidth <= variables.tabletResponsiveWidthBreakpoint;
-    const onboardingIsMediumOrLargerScreenWidth = windowWidth > variables.mobileResponsiveWidthBreakpoint;
+    const onboardingIsMediumOrLargerScreenWidth = !isInLandscapeMode && windowWidth > variables.mobileResponsiveWidthBreakpoint;
     const isLargeScreenWidth = windowWidth > variables.tabletResponsiveWidthBreakpoint;
     const isExtraLargeScreenWidth = windowWidth > variables.sidePanelResponsiveWidthBreakpoint;
     const isExtraSmallScreenWidth = windowWidth <= variables.extraSmallMobileResponsiveWidthBreakpoint;
@@ -66,7 +70,7 @@ export default function useResponsiveLayout(): ResponsiveLayoutResult {
         // and the component calling this hook is not the child of another modal type, such as a confirm modal
         (isDisplayedInNarrowModalNavigator && !activeModalType);
 
-    const shouldUseNarrowLayout = isSmallScreenWidth || isInNarrowPaneModal;
+    const shouldUseNarrowLayout = isSmallScreenWidth || isInNarrowPaneModal || isInLandscapeMode;
 
     return {
         shouldUseNarrowLayout,
@@ -79,6 +83,6 @@ export default function useResponsiveLayout(): ResponsiveLayoutResult {
         isLargeScreenWidth,
         isExtraLargeScreenWidth,
         isSmallScreen,
-        isInLandscapeMode: false,
+        isInLandscapeMode,
     };
 }

src/hooks/useSafeAreaPaddings.ts

@@ -35,7 +35,7 @@ import useStyleUtils from './useStyleUtils';
 function useSafeAreaPaddings(isUsingEdgeToEdgeBottomSafeAreaPadding = false) {
     const StyleUtils = useStyleUtils();
     const insets = useSafeAreaInsets();
-    const {paddingTop, paddingBottom} = useMemo(() => StyleUtils.getPlatformSafeAreaPadding(insets), [StyleUtils, insets]);
+    const {paddingTop, paddingBottom, paddingLeft, paddingRight} = useMemo(() => StyleUtils.getPlatformSafeAreaPadding(insets), [StyleUtils, insets]);
 
     const screenWrapperStatusContext = useContext(ScreenWrapperStatusContext);
     const isSafeAreaTopPaddingApplied = screenWrapperStatusContext?.isSafeAreaTopPaddingApplied ?? false;
@@ -66,9 +66,13 @@ function useSafeAreaPaddings(isUsingEdgeToEdgeBottomSafeAreaPadding = false) {
     return {
         paddingTop: isSafeAreaTopPaddingApplied ? 0 : paddingTop,
         paddingBottom: adaptedPaddingBottom,
+        paddingLeft,
+        paddingRight,
         unmodifiedPaddings: {
             top: paddingTop,
             bottom: paddingBottom,
+            left: paddingLeft,
+            right: paddingRight,
         },
         insets: adaptedInsets,
         safeAreaPaddingBottomStyle,

src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalStackScreenOptions.ts

@@ -61,7 +61,9 @@ function useWideModalStackScreenOptions() {
                     contentStyle: styles.navigationScreenCardStyle,
                 },
                 web: {
-                    cardStyle: styles.navigationScreenCardStyle,
+                    cardStyle: isSmallScreenWidth
+                        ? {...styles.navigationScreenCardStyle, paddingLeft: 'env(safe-area-inset-left)', paddingRight: 'env(safe-area-inset-right)'}
+                        : styles.navigationScreenCardStyle,
                     cardStyleInterpolator,
                     transitionSpec: isSmallScreenWidth ? undefined : RHP_WEB_TRANSITION_SPEC,
                 },

src/libs/Navigation/AppNavigator/useRootNavigatorScreenOptions.ts

@@ -74,6 +74,8 @@ const useRootNavigatorScreenOptions = () => {
                     top: 0,
                     left: 0,
                     position: 'fixed',
+                    paddingLeft: 'env(safe-area-inset-left)',
+                    paddingRight: 'env(safe-area-inset-right)',
                 },
                 cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator({props, enter: onboardingEnter}),
             },
@@ -113,7 +115,9 @@ const useRootNavigatorScreenOptions = () => {
             animation: Animations.NONE,
             web: {
                 cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator({props, enter: {kind: 'none'}, applySidePanelOffset: true}),
-                cardStyle: shouldUseNarrowLayout ? {...StyleUtils.getNavigationModalCardStyle(), paddingLeft: 0} : {...themeStyles.h100, width: '100%'},
+                cardStyle: shouldUseNarrowLayout
+                    ? {...StyleUtils.getNavigationModalCardStyle(), paddingLeft: 'env(safe-area-inset-left)', paddingRight: 'env(safe-area-inset-right)'}
+                    : {...themeStyles.h100, width: '100%'},
             },
         },
     } satisfies RootNavigatorScreenOptions;

src/libs/Navigation/AppNavigator/useSplitNavigatorScreenOptions.ts

@@ -19,6 +19,11 @@ import useModalCardStyleInterpolator from './useModalCardStyleInterpolator';
 
 const IS_MOBILE_SAFARI = isMobileSafari();
 
+// On mWeb the centralScreen card is `position: fixed`, so `width: 100%` resolves against the viewport
+// (including the landscape notch gutters), not the layout parent. Subtract the safe-area
+// insets so the card is sized to the usable safe region instead of overflowing.
+const NARROW_CARD_SAFE_AREA_WIDTH = 'calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right))';
+
 type SplitNavigatorScreenOptions = {
     sidebarScreen: PlatformStackNavigationOptions;
     centralScreen: PlatformStackNavigationOptions;
@@ -66,7 +71,7 @@ const useSplitNavigatorScreenOptions = () => {
             web: {
                 cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator({props, enter: centralScreenEnter}),
                 cardStyle: shouldUseNarrowLayout
-                    ? StyleUtils.getNavigationModalCardStyle()
+                    ? {...StyleUtils.getNavigationModalCardStyle(), width: NARROW_CARD_SAFE_AREA_WIDTH}
                     : {
                           ...themeStyles.h100,
                       },

src/libs/getIsNarrowLayout/index.ts

@@ -1,5 +1,6 @@
 import getIsSmallScreenWidth from '@libs/getIsSmallScreenWidth';
+import isInLandscapeMode from '@libs/isInLandscapeMode';
 
 export default function getIsNarrowLayout() {
-    return getIsSmallScreenWidth();
+    return getIsSmallScreenWidth() || isInLandscapeMode();
 }

src/libs/isInLandscapeMode/index.ts

@@ -1,7 +1,7 @@
-/**
- * We only want to change UI according to the landscape mode on native platforms.
- */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function isInLandscapeMode(windowWidth: number, windowHeight: number): boolean {
-    return false;
+import {isMobile} from '@libs/Browser';
+
+import {Dimensions} from 'react-native';
+
+export default function isInLandscapeMode(windowWidth = Dimensions.get('window').width, windowHeight = Dimensions.get('window').height): boolean {
+    return isMobile() && windowWidth > windowHeight;
 }

src/pages/iou/request/step/IOURequestStepDistanceGPS/index.tsx

@@ -1,6 +1,7 @@
 import Button from '@components/ButtonComposed';
 import {loadIllustration} from '@components/Icon/IllustrationLoader';
 import ImageSVG from '@components/ImageSVG';
+import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 
@@ -25,26 +26,28 @@ function IOURequestStepDistanceGPS(props: IOURequestStepDistanceGPSProps) {
     const {translate} = useLocalize();
 
     return (
-        <View style={[styles.ph5, styles.pv10, styles.alignItemsCenter, styles.justifyContentCenter, styles.h100]}>
-            <View style={[styles.toddInCarIllustrationContainer]}>
-                <ImageSVG
-                    src={ToddInCar}
-                    contentFit="contain"
-                />
+        <ScrollView contentContainerStyle={[styles.flexGrow1]}>
+            <View style={[styles.ph5, styles.pv10, styles.alignItemsCenter, styles.justifyContentCenter, styles.h100]}>
+                <View style={[styles.toddInCarIllustrationContainer]}>
+                    <ImageSVG
+                        src={ToddInCar}
+                        contentFit="contain"
+                    />
+                </View>
+                <View style={[styles.gap2, styles.pb5, styles.pt2]}>
+                    <Text style={[styles.textHeadlineH1, styles.textAlignCenter]}>{translate('gps.desktop.title')}</Text>
+                    <Text style={[styles.textAlignCenter, styles.textSupportingNormal]}>{translate('gps.desktop.subtitle')}</Text>
+                </View>
+
+                <Button
+                    onPress={() => Linking.openURL(CONST.EXPENSIFY_MOBILE_URL)}
+                    variant={CONST.BUTTON_VARIANT.SUCCESS}
+                    sentryLabel={CONST.SENTRY_LABEL.IOU_REQUEST_STEP.GPS_OPEN_MOBILE_BUTTON}
+                >
+                    <Button.Text>{translate('gps.desktop.button')}</Button.Text>
+                </Button>
             </View>
-            <View style={[styles.gap2, styles.pb5, styles.pt2]}>
-                <Text style={[styles.textHeadlineH1, styles.textAlignCenter]}>{translate('gps.desktop.title')}</Text>
-                <Text style={[styles.textAlignCenter, styles.textSupportingNormal]}>{translate('gps.desktop.subtitle')}</Text>
-            </View>
-
-            <Button
-                onPress={() => Linking.openURL(CONST.EXPENSIFY_MOBILE_URL)}
-                variant={CONST.BUTTON_VARIANT.SUCCESS}
-                sentryLabel={CONST.SENTRY_LABEL.IOU_REQUEST_STEP.GPS_OPEN_MOBILE_BUTTON}
-            >
-                <Button.Text>{translate('gps.desktop.button')}</Button.Text>
-            </Button>
-        </View>
+        </ScrollView>
     );
 }
 

src/pages/iou/request/step/IOURequestStepDistanceOdometer.tsx

@@ -3,6 +3,7 @@ import FormHelpMessage from '@components/FormHelpMessage';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import ReceiptImage from '@components/ReceiptImage';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
+import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
@@ -603,7 +604,7 @@ function IOURequestStepDistanceOdometer({
             shouldShowWrapper={!isCreatingNewRequest}
             includeSafeAreaPaddingBottom
         >
-            <View style={[styles.flex1, styles.flexColumn, styles.justifyContentBetween, styles.ph5, styles.pt5, styles.mb5]}>
+            <ScrollView contentContainerStyle={[styles.flexGrow1, styles.justifyContentBetween, styles.ph5, styles.pt5, styles.mb5]}>
                 <View>
                     {/* Start Reading */}
                     <View style={[styles.mb6, styles.flexRow, !isEditing && [styles.alignItemsCenter, styles.gap3]]}>
@@ -740,7 +741,7 @@ function IOURequestStepDistanceOdometer({
                         sentryLabel={CONST.SENTRY_LABEL.IOU_REQUEST_STEP.DISTANCE_ODOMETER_NEXT_BUTTON}
                     />
                 </View>
-            </View>
+            </ScrollView>
         </StepScreenWrapper>
     );
 }