diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
index 4d32b4427d92..780b4e389c52 100644
--- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
+++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
@@ -7,9 +7,9 @@ import _ from 'underscore';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
@@ -41,7 +41,7 @@ function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '',
         [],
     );
 
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     let linkRef;
 
@@ -51,7 +51,7 @@ function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '',
     } else {
         linkProps.href = href;
     }
-    const defaultTextStyle = DeviceCapabilities.canUseTouchScreen() || isSmallScreenWidth ? {} : {...styles.userSelectText, ...styles.cursorPointer};
+    const defaultTextStyle = DeviceCapabilities.canUseTouchScreen() || shouldUseNarrowLayout ? {} : {...styles.userSelectText, ...styles.cursorPointer};
     const isEmail = Str.isValidEmail(href.replace(/mailto:/i, ''));
 
     return (
diff --git a/src/components/AttachmentPicker/index.native.js b/src/components/AttachmentPicker/index.native.js
index 59928b80c4b1..945fde384088 100644
--- a/src/components/AttachmentPicker/index.native.js
+++ b/src/components/AttachmentPicker/index.native.js
@@ -12,8 +12,8 @@ import Popover from '@components/Popover';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import CONST from '@src/CONST';
 import {defaultProps as baseDefaultProps, propTypes as basePropTypes} from './attachmentPickerPropTypes';
@@ -109,7 +109,7 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) {
     const onCanceled = useRef();
 
     const {translate} = useLocalize();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     /**
      * A generic handling when we don't know the exact reason for an error
@@ -313,7 +313,7 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) {
                 anchorPosition={styles.createMenuPosition}
                 onModalHide={onModalHide.current}
             >
-                <View style={!isSmallScreenWidth && styles.createMenuContainer}>
+                <View style={!shouldUseNarrowLayout && styles.createMenuContainer}>
                     {_.map(menuItemData, (item, menuIndex) => (
                         <MenuItem
                             key={item.textTranslationKey}
diff --git a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
index f4cbffc0e1e4..ae87988d54d4 100644
--- a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
+++ b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {PixelRatio, View} from 'react-native';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 
@@ -15,8 +16,9 @@ const defaultProps = {
 
 function AttachmentCarouselCellRenderer(props) {
     const styles = useThemeStyles();
-    const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
-    const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, true);
+    const {windowWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const modalStyles = styles.centeredModalStyles(shouldUseNarrowLayout, true);
     const style = [props.style, styles.h100, {width: PixelRatio.roundToNearestPixel(windowWidth - (modalStyles.marginHorizontal + modalStyles.borderWidth) * 2)}];
 
     return (
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
index 1847d30ede22..d56683dc579b 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
@@ -7,9 +7,9 @@ import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 
 const propTypes = {
     /** Where the arrows should be visible */
@@ -42,13 +42,13 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
     const isForwardDisabled = page === _.size(attachments) - 1;
 
     const {translate} = useLocalize();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     return shouldShowArrows ? (
         <>
             {!isBackDisabled && (
                 <Tooltip text={translate('common.previous')}>
-                    <View style={[styles.attachmentArrow, isSmallScreenWidth ? styles.l2 : styles.l8]}>
+                    <View style={[styles.attachmentArrow, shouldUseNarrowLayout ? styles.l2 : styles.l8]}>
                         <Button
                             small
                             innerStyles={[styles.arrowIcon]}
@@ -64,7 +64,7 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
             )}
             {!isForwardDisabled && (
                 <Tooltip text={translate('common.next')}>
-                    <View style={[styles.attachmentArrow, isSmallScreenWidth ? styles.r2 : styles.r8]}>
+                    <View style={[styles.attachmentArrow, shouldUseNarrowLayout ? styles.r2 : styles.r8]}>
                         <Button
                             small
                             innerStyles={[styles.arrowIcon]}
diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js
index 6c05a4b6a5b5..e427e8bdd1ac 100644
--- a/src/components/EmojiPicker/EmojiPicker.js
+++ b/src/components/EmojiPicker/EmojiPicker.js
@@ -4,6 +4,7 @@ import {Dimensions} from 'react-native';
 import _ from 'underscore';
 import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent';
 import withViewportOffsetTop from '@components/withViewportOffsetTop';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -34,7 +35,8 @@ const EmojiPicker = forwardRef((props, ref) => {
     const onModalHide = useRef(() => {});
     const onEmojiSelected = useRef(() => {});
     const emojiSearchInput = useRef();
-    const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
+    const {windowHeight} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     /**
      * Show the emoji picker menu.
@@ -126,7 +128,7 @@ const EmojiPicker = forwardRef((props, ref) => {
         const emojiPopoverDimensionListener = Dimensions.addEventListener('change', () => {
             if (!emojiPopoverAnchor.current) {
                 // In small screen width, the window size change might be due to keyboard open/hide, we should avoid hide EmojiPicker in those cases
-                if (isEmojiPickerVisible && !isSmallScreenWidth) {
+                if (isEmojiPickerVisible && !shouldUseNarrowLayout) {
                     hideEmojiPicker();
                 }
                 return;
@@ -141,7 +143,7 @@ const EmojiPicker = forwardRef((props, ref) => {
             }
             emojiPopoverDimensionListener.remove();
         };
-    }, [isEmojiPickerVisible, isSmallScreenWidth, emojiPopoverAnchorOrigin]);
+    }, [isEmojiPickerVisible, shouldUseNarrowLayout, emojiPopoverAnchorOrigin]);
 
     // There is no way to disable animations, and they are really laggy, because there are so many
     // emojis. The best alternative is to set it to 1ms so it just "pops" in and out
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index 36594dabcd30..91840c803cb7 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -11,6 +11,7 @@ import EmojiSkinToneList from '@components/EmojiPicker/EmojiSkinToneList';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -54,7 +55,8 @@ function EmojiPickerMenu(props) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
 
-    const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
+    const {windowHeight} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     // Ref for the emoji search input
     const searchInputRef = useRef(null);
@@ -476,7 +478,7 @@ function EmojiPickerMenu(props) {
         <View
             style={[
                 styles.emojiPickerContainer,
-                StyleUtils.getEmojiPickerStyle(isSmallScreenWidth),
+                StyleUtils.getEmojiPickerStyle(shouldUseNarrowLayout),
                 // Disable pointer events so that onHover doesn't get triggered when the items move while we're scrolling
                 arePointerEventsDisabled ? styles.pointerEventsNone : styles.pointerEventsAuto,
             ]}
diff --git a/src/components/HeaderPageLayout.js b/src/components/HeaderPageLayout.js
index 9ef5d4f83a06..5a262bcfa086 100644
--- a/src/components/HeaderPageLayout.js
+++ b/src/components/HeaderPageLayout.js
@@ -3,6 +3,7 @@ import React, {useMemo} from 'react';
 import {ScrollView, View} from 'react-native';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -54,7 +55,8 @@ function HeaderPageLayout({backgroundColor, children, footer, headerContainerSty
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
+    const {windowHeight} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {isOffline} = useNetwork();
     const appBGColor = StyleUtils.getBackgroundColorStyle(theme.appBG);
     const {titleColor, iconFill} = useMemo(() => {
@@ -86,7 +88,7 @@ function HeaderPageLayout({backgroundColor, children, footer, headerContainerSty
                         {Browser.isSafari() && (
                             <View style={styles.dualColorOverscrollSpacer}>
                                 <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(backgroundColor || theme.appBG)]} />
-                                <View style={[isSmallScreenWidth ? styles.flex1 : styles.flex3, appBGColor]} />
+                                <View style={[shouldUseNarrowLayout ? styles.flex1 : styles.flex3, appBGColor]} />
                             </View>
                         )}
                         <ScrollView
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index f0f59130017a..8f15c7aaecc5 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -15,10 +15,10 @@ import SubscriptAvatar from '@components/SubscriptAvatar';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import DateUtils from '@libs/DateUtils';
 import DomUtils from '@libs/DomUtils';
 import {getGroupChatName} from '@libs/GroupChatUtils';
@@ -68,7 +68,7 @@ function OptionRowLHN(props) {
     const StyleUtils = useStyleUtils();
     const popoverAnchor = useRef(null);
     const isFocusedRef = useRef(true);
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const {translate} = useLocalize();
 
@@ -124,7 +124,7 @@ function OptionRowLHN(props) {
      * @param {Object} [event] - A press event.
      */
     const showPopover = (event) => {
-        if (!isFocusedRef.current && isSmallScreenWidth) {
+        if (!isFocusedRef.current && shouldUseNarrowLayout) {
             return;
         }
         setIsContextMenuActive(true);
diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 96e6ea0bbc44..9ba12aa478c3 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -4,10 +4,10 @@ import {GestureResponderEvent, StyleProp, TextStyle, View, ViewStyle} from 'reac
 import {AnimatedStyle} from 'react-native-reanimated';
 import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import ControlSelection from '@libs/ControlSelection';
 import convertToLTR from '@libs/convertToLTR';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
@@ -290,7 +290,7 @@ function MenuItem(
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const combinedStyle = StyleUtils.combineStyles(style ?? {}, styles.popoverMenuItem);
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [html, setHtml] = useState('');
     const titleRef = useRef('');
 
@@ -377,7 +377,7 @@ function MenuItem(
             {(isHovered) => (
                 <PressableWithSecondaryInteraction
                     onPress={shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed(onPressAction, isAnonymousAction) : onPressAction}
-                    onPressIn={() => shouldBlockSelection && isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                    onPressIn={() => shouldBlockSelection && shouldUseNarrowLayout && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                     onPressOut={ControlSelection.unblock}
                     onSecondaryInteraction={onSecondaryInteraction}
                     style={({pressed}) =>
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index 89640c56f5ef..2e6e0c6d4281 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import ReactNativeModal from 'react-native-modal';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import usePrevious from '@hooks/usePrevious';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
@@ -44,7 +45,8 @@ function BaseModal(
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const {windowWidth, windowHeight, isSmallScreenWidth} = useWindowDimensions();
+    const {windowWidth, windowHeight} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const safeAreaInsets = useSafeAreaInsets();
 
@@ -138,13 +140,13 @@ function BaseModal(
                 {
                     windowWidth,
                     windowHeight,
-                    isSmallScreenWidth,
                 },
+                shouldUseNarrowLayout,
                 popoverAnchorPosition,
                 innerContainerStyle,
                 outerStyle,
             ),
-        [StyleUtils, type, windowWidth, windowHeight, isSmallScreenWidth, popoverAnchorPosition, innerContainerStyle, outerStyle],
+        [StyleUtils, type, windowWidth, windowHeight, shouldUseNarrowLayout, popoverAnchorPosition, innerContainerStyle, outerStyle],
     );
 
     const {
diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index 488630dd0590..fe4bd82aa979 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -4,6 +4,7 @@ import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
@@ -72,7 +73,8 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
     const moneyRequestReport = parentReport;
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
     const isApproved = ReportUtils.isReportApproved(moneyRequestReport);
-    const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
+    const {windowWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     // Only the requestor can take delete the request, admins can only edit it.
     const isActionOwner = lodashGet(parentReportAction, 'actorAccountID') === lodashGet(session, 'accountID', null);
@@ -126,7 +128,7 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
                     }}
                     policy={policy}
                     personalDetails={personalDetails}
-                    shouldShowBackButton={isSmallScreenWidth}
+                    shouldShowBackButton={shouldUseNarrowLayout}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.HOME, false, true)}
                 />
                 {isPending && (
diff --git a/src/components/OfflineIndicator.tsx b/src/components/OfflineIndicator.tsx
index 739befa7d081..1382bfa96ad3 100644
--- a/src/components/OfflineIndicator.tsx
+++ b/src/components/OfflineIndicator.tsx
@@ -2,8 +2,8 @@ import React, {useMemo} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import variables from '@styles/variables';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
@@ -21,15 +21,15 @@ function OfflineIndicator({style, containerStyles}: OfflineIndicatorProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const computedStyles = useMemo((): StyleProp<ViewStyle> => {
         if (containerStyles) {
             return containerStyles;
         }
 
-        return isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator;
-    }, [containerStyles, isSmallScreenWidth, styles.offlineIndicatorMobile, styles.offlineIndicator]);
+        return shouldUseNarrowLayout ? styles.offlineIndicatorMobile : styles.offlineIndicator;
+    }, [containerStyles, shouldUseNarrowLayout, styles.offlineIndicatorMobile, styles.offlineIndicator]);
 
     if (!isOffline) {
         return null;
diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 42d2ebbb771e..3fa81e0cfedd 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -6,8 +6,8 @@ import Button from '@components/Button';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import shouldDelayFocus from '@libs/shouldDelayFocus';
 import CONST from '@src/CONST';
@@ -43,7 +43,7 @@ const defaultProps = {
 
 function PDFPasswordForm({isFocused, isPasswordInvalid, shouldShowLoadingIndicator, onSubmit, onPasswordUpdated, onPasswordFieldFocused}) {
     const styles = useThemeStyles();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {translate} = useLocalize();
 
     const [password, setPassword] = useState('');
@@ -113,7 +113,7 @@ function PDFPasswordForm({isFocused, isPasswordInvalid, shouldShowLoadingIndicat
     return shouldShowForm ? (
         <ScrollView
             keyboardShouldPersistTaps="handled"
-            style={styles.getPDFPasswordFormStyle(isSmallScreenWidth)}
+            style={styles.getPDFPasswordFormStyle(shouldUseNarrowLayout)}
             contentContainerStyle={styles.p5}
         >
             <View style={styles.mb4}>
diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js
index 1bb50dfbd89e..52c8fd6f95f2 100644
--- a/src/components/PopoverMenu/index.js
+++ b/src/components/PopoverMenu/index.js
@@ -9,8 +9,8 @@ import Text from '@components/Text';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import CONST from '@src/CONST';
 import {defaultProps as createMenuDefaultProps, propTypes as createMenuPropTypes} from './popoverMenuPropTypes';
 
@@ -52,7 +52,7 @@ const defaultProps = {
 
 function PopoverMenu(props) {
     const styles = useThemeStyles();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const selectedItemIndex = useRef(null);
     const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: -1, maxIndex: props.menuItems.length - 1, isActive: props.isVisible});
 
@@ -96,7 +96,7 @@ function PopoverMenu(props) {
             withoutOverlay={props.withoutOverlay}
             shouldSetModalVisibility={props.shouldSetModalVisibility}
         >
-            <View style={isSmallScreenWidth ? {} : styles.createMenuContainer}>
+            <View style={shouldUseNarrowLayout ? {} : styles.createMenuContainer}>
                 {!_.isEmpty(props.headerText) && <Text style={[styles.createMenuHeaderText, styles.ml3]}>{props.headerText}</Text>}
                 {_.map(props.menuItems, (item, menuIndex) => (
                     <MenuItem
diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js
index 43ca1c0de818..749dd572ddab 100644
--- a/src/components/PopoverWithoutOverlay/index.js
+++ b/src/components/PopoverWithoutOverlay/index.js
@@ -4,6 +4,7 @@ import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import {defaultProps, propTypes} from '@components/Popover/popoverPropTypes';
 import {PopoverContext} from '@components/PopoverProvider';
 import withWindowDimensions from '@components/withWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -14,14 +15,16 @@ function Popover(props) {
     const StyleUtils = useStyleUtils();
     const {onOpen, close} = React.useContext(PopoverContext);
     const insets = useSafeAreaInsets();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+
     const {modalStyle, modalContainerStyle, shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding} =
         StyleUtils.getModalStyles(
             'popover',
             {
                 windowWidth: props.windowWidth,
                 windowHeight: props.windowHeight,
-                isSmallScreenWidth: false,
             },
+            shouldUseNarrowLayout,
             props.anchorPosition,
             props.innerContainerStyle,
             props.outerStyle,
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 12c6d0629370..b929e985766c 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -15,6 +15,7 @@ import {showContextMenuForReport} from '@components/ShowContextMenuContext';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -130,7 +131,8 @@ function MoneyRequestPreview(props) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
-    const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
+    const {windowWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     if (_.isEmpty(props.iouReport) && !props.isBillSplit) {
         return null;
@@ -287,7 +289,7 @@ function MoneyRequestPreview(props) {
                                         style={[
                                             styles.textHeadline,
                                             props.isBillSplit &&
-                                                StyleUtils.getAmountFontSizeAndLineHeight(isSmallScreenWidth, windowWidth, displayAmount.length, sortedParticipantAvatars.length),
+                                                StyleUtils.getAmountFontSizeAndLineHeight(shouldUseNarrowLayout, windowWidth, displayAmount.length, sortedParticipantAvatars.length),
                                             isDeleted && styles.lineThrough,
                                         ]}
                                         numberOfLines={1}
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index d024ef43a69d..b1344f3d9c0b 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -17,10 +17,10 @@ import transactionPropTypes from '@components/transactionPropTypes';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as CardUtils from '@libs/CardUtils';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
@@ -83,7 +83,7 @@ function MoneyRequestView({report, parentReport, parentReportActions, policyCate
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {translate} = useLocalize();
     const {canUseViolations} = usePermissions();
     const parentReportAction = parentReportActions[report.parentReportActionID] || {};
@@ -175,9 +175,9 @@ function MoneyRequestView({report, parentReport, parentReportActions, policyCate
     const getPendingFieldAction = (fieldPath) => lodashGet(transaction, fieldPath) || pendingAction;
 
     return (
-        <View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth)]}>
+        <View style={[StyleUtils.getReportWelcomeContainerStyle(shouldUseNarrowLayout)]}>
             <AnimatedEmptyStateBackground />
-            <View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]}>
+            <View style={[StyleUtils.getReportWelcomeTopMarginStyle(shouldUseNarrowLayout)]}>
                 {hasReceipt && (
                     <OfflineWithFeedback pendingAction={pendingAction}>
                         <View style={styles.moneyRequestViewImage}>
diff --git a/src/components/ReportHeaderSkeletonView.tsx b/src/components/ReportHeaderSkeletonView.tsx
index 91adb26faff5..227fe463b766 100644
--- a/src/components/ReportHeaderSkeletonView.tsx
+++ b/src/components/ReportHeaderSkeletonView.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import {View} from 'react-native';
 import {Circle, Rect} from 'react-native-svg';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import Icon from './Icon';
@@ -21,12 +21,12 @@ function ReportHeaderSkeletonView({shouldAnimate = true, onBackButtonPress = ()
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     return (
         <View style={[styles.appContentHeader]}>
-            <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && styles.pl5]}>
-                {isSmallScreenWidth && (
+            <View style={[styles.appContentHeaderTitle, !shouldUseNarrowLayout && styles.pl5]}>
+                {shouldUseNarrowLayout && (
                     <PressableWithFeedback
                         onPress={onBackButtonPress}
                         style={[styles.LHNToggle]}
diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index bd277ffa1ab8..16ff18f19490 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -14,6 +14,7 @@ import useEnvironment from '@hooks/useEnvironment';
 import useInitialDimensions from '@hooks/useInitialWindowDimensions';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useNetwork from '@hooks/useNetwork';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
@@ -42,7 +43,8 @@ const ScreenWrapper = React.forwardRef(
         },
         ref,
     ) => {
-        const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
+        const {windowHeight} = useWindowDimensions();
+        const {shouldUseNarrowLayout} = useResponsiveLayout();
         const {initialHeight} = useInitialDimensions();
         const styles = useThemeStyles();
         const keyboardState = useKeyboardState();
@@ -160,7 +162,7 @@ const ScreenWrapper = React.forwardRef(
                                                   })
                                                 : children
                                         }
-                                        {isSmallScreenWidth && shouldShowOfflineIndicator && <OfflineIndicator style={offlineIndicatorStyle} />}
+                                        {shouldUseNarrowLayout && shouldShowOfflineIndicator && <OfflineIndicator style={offlineIndicatorStyle} />}
                                     </PickerAvoidingView>
                                 </KeyboardAvoidingView>
                             </View>
diff --git a/src/hooks/useResponsiveLayout.ts b/src/hooks/useResponsiveLayout.ts
new file mode 100644
index 000000000000..b386fc985604
--- /dev/null
+++ b/src/hooks/useResponsiveLayout.ts
@@ -0,0 +1,24 @@
+import {ParamListBase, RouteProp, useRoute} from '@react-navigation/native';
+import useWindowDimensions from './useWindowDimensions';
+
+type RouteParams = ParamListBase & {
+    params: {isInRHP?: boolean};
+};
+type ResponsiveLayoutResult = {
+    shouldUseNarrowLayout: boolean;
+};
+/**
+ * Hook to determine if we are on mobile devices or in the RHP
+ */
+export default function useResponsiveLayout(): ResponsiveLayoutResult {
+    const {isSmallScreenWidth} = useWindowDimensions();
+    try {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const {params} = useRoute<RouteProp<RouteParams, 'params'>>();
+        return {shouldUseNarrowLayout: isSmallScreenWidth || (params?.isInRHP ?? false)};
+    } catch (error) {
+        return {
+            shouldUseNarrowLayout: isSmallScreenWidth,
+        };
+    }
+}
diff --git a/src/libs/ComposerUtils/index.ts b/src/libs/ComposerUtils/index.ts
index 32ebca9afee8..bc747f3bacad 100644
--- a/src/libs/ComposerUtils/index.ts
+++ b/src/libs/ComposerUtils/index.ts
@@ -17,10 +17,10 @@ function insertText(text: string, selection: Selection, textToInsert: string): s
 /**
  * Check whether we can skip trigger hotkeys on some specific devices.
  */
-function canSkipTriggerHotkeys(isSmallScreenWidth: boolean, isKeyboardShown: boolean): boolean {
+function canSkipTriggerHotkeys(shouldUseNarrowLayout: boolean, isKeyboardShown: boolean): boolean {
     // Do not trigger actions for mobileWeb or native clients that have the keyboard open
     // because for those devices, we want the return key to insert newlines rather than submit the form
-    return (isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen()) || isKeyboardShown;
+    return (shouldUseNarrowLayout && DeviceCapabilities.canUseTouchScreen()) || isKeyboardShown;
 }
 
 export {getNumberOfLines, updateNumberOfLines, insertText, canSkipTriggerHotkeys};
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index f6572c84709d..3b4ea0777b51 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -1,8 +1,8 @@
 import React, {memo, useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import Onyx, {OnyxEntry, withOnyx} from 'react-native-onyx';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
 import Navigation from '@libs/Navigation/Navigation';
@@ -132,8 +132,8 @@ const modalScreenListeners = {
 
 function AuthScreens({lastUpdateIDAppliedToClient, session, lastOpenedPublicRoomID, demoInfo, isUsingMemoryOnlyKeys = false}: AuthScreensProps) {
     const styles = useThemeStyles();
-    const {isSmallScreenWidth} = useWindowDimensions();
-    const screenOptions = getRootNavigatorScreenOptions(isSmallScreenWidth, styles);
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const screenOptions = getRootNavigatorScreenOptions(shouldUseNarrowLayout, styles);
     const isInitialRender = useRef(true);
 
     if (isInitialRender.current) {
@@ -252,8 +252,8 @@ function AuthScreens({lastUpdateIDAppliedToClient, session, lastOpenedPublicRoom
     }, []);
 
     return (
-        <View style={styles.rootNavigatorContainerStyles(isSmallScreenWidth)}>
-            <RootStack.Navigator isSmallScreenWidth={isSmallScreenWidth}>
+        <View style={styles.rootNavigatorContainerStyles(shouldUseNarrowLayout)}>
+            <RootStack.Navigator shouldUseNarrowLayout={shouldUseNarrowLayout}>
                 <RootStack.Screen
                     name={SCREENS.HOME}
                     options={screenOptions.homeScreen}
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
index 256ea6d4eceb..0d44a6d950fc 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
@@ -61,6 +61,7 @@ function createModalStackNavigator<TStackParams extends ParamListBase>(screens:
                         key={name}
                         name={name}
                         getComponent={(screens as Required<Screens>)[name as Screen]}
+                        initialParams={{isInRHP: true} as TStackParams[string]}
                     />
                 ))}
             </ModalStackNavigator.Navigator>
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
index bd790589c8d1..1df8bb5774e6 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
@@ -2,8 +2,8 @@ import {createStackNavigator, StackScreenProps} from '@react-navigation/stack';
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import NoDropZone from '@components/DragAndDrop/NoDropZone';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
 import RHPScreenOptions from '@libs/Navigation/AppNavigator/RHPScreenOptions';
 import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigation/types';
@@ -17,13 +17,13 @@ const Stack = createStackNavigator<RightModalNavigatorParamList>();
 
 function RightModalNavigator({navigation}: RightModalNavigatorProps) {
     const styles = useThemeStyles();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const screenOptions = useMemo(() => RHPScreenOptions(styles), [styles]);
 
     return (
         <NoDropZone>
-            {!isSmallScreenWidth && <Overlay onPress={navigation.goBack} />}
-            <View style={styles.RHPNavigatorContainer(isSmallScreenWidth)}>
+            {!shouldUseNarrowLayout && <Overlay onPress={navigation.goBack} />}
+            <View style={styles.RHPNavigatorContainer(shouldUseNarrowLayout)}>
                 <Stack.Navigator screenOptions={screenOptions}>
                     <Stack.Screen
                         name={SCREENS.RIGHT_MODAL.SETTINGS}
diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.tsx b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.tsx
index a55c74f3a479..310c511bb73b 100644
--- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.native.tsx
@@ -1,16 +1,16 @@
 import {createNavigatorFactory, ParamListBase, StackActionHelpers, StackNavigationState, useNavigationBuilder} from '@react-navigation/native';
 import {StackNavigationEventMap, StackNavigationOptions, StackView} from '@react-navigation/stack';
 import React, {useRef} from 'react';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import CustomRouter from './CustomRouter';
 import type {ResponsiveStackNavigatorProps, ResponsiveStackNavigatorRouterOptions} from './types';
 
 function ResponsiveStackNavigator(props: ResponsiveStackNavigatorProps) {
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
-    const isSmallScreenWidthRef = useRef(isSmallScreenWidth);
+    const shouldUseNarrowLayoutRef = useRef(shouldUseNarrowLayout);
 
-    isSmallScreenWidthRef.current = isSmallScreenWidth;
+    shouldUseNarrowLayoutRef.current = shouldUseNarrowLayout;
 
     const {navigation, state, descriptors, NavigationContent} = useNavigationBuilder<
         StackNavigationState<ParamListBase>,
diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx
index dd2e548064c4..8315d098ad00 100644
--- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx
@@ -1,7 +1,7 @@
 import {createNavigatorFactory, ParamListBase, StackActionHelpers, StackNavigationState, useNavigationBuilder} from '@react-navigation/native';
 import {StackNavigationEventMap, StackNavigationOptions, StackView} from '@react-navigation/stack';
 import React, {useMemo, useRef} from 'react';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import NAVIGATORS from '@src/NAVIGATORS';
 import CustomRouter from './CustomRouter';
 import type {ResponsiveStackNavigatorProps, ResponsiveStackNavigatorRouterOptions} from './types';
@@ -28,11 +28,11 @@ function reduceReportRoutes(routes: Routes): Routes {
 }
 
 function ResponsiveStackNavigator(props: ResponsiveStackNavigatorProps) {
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
-    const isSmallScreenWidthRef = useRef<boolean>(isSmallScreenWidth);
+    const shouldUseNarrowLayoutRef = useRef<boolean>(shouldUseNarrowLayout);
 
-    isSmallScreenWidthRef.current = isSmallScreenWidth;
+    shouldUseNarrowLayoutRef.current = shouldUseNarrowLayout;
 
     const {navigation, state, descriptors, NavigationContent} = useNavigationBuilder<
         StackNavigationState<ParamListBase>,
diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts
index 707a0ff4498d..3035d0d1ed30 100644
--- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts
+++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/types.ts
@@ -2,7 +2,7 @@ import {DefaultNavigatorOptions, ParamListBase, StackNavigationState, StackRoute
 import {StackNavigationEventMap, StackNavigationOptions} from '@react-navigation/stack';
 
 type ResponsiveStackNavigatorConfig = {
-    isSmallScreenWidth: boolean;
+    shouldUseNarrowLayout: boolean;
 };
 
 type ResponsiveStackNavigatorRouterOptions = StackRouterOptions;
diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
index 379c5281b78f..04fe01d9e78c 100644
--- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
+++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
@@ -15,10 +15,10 @@ const commonScreenOptions: StackNavigationOptions = {
     animationTypeForReplace: 'push',
 };
 
-export default (isSmallScreenWidth: boolean, themeStyles: ThemeStyles): ScreenOptions => ({
+export default (shouldUseNarrowLayout: boolean, themeStyles: ThemeStyles): ScreenOptions => ({
     rightModalNavigator: {
         ...commonScreenOptions,
-        cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, props),
+        cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(shouldUseNarrowLayout, false, props),
         presentation: 'transparentModal',
 
         // We want pop in RHP since there are some flows that would work weird otherwise
@@ -27,7 +27,7 @@ export default (isSmallScreenWidth: boolean, themeStyles: ThemeStyles): ScreenOp
             ...getNavigationModalCardStyle(),
 
             // This is necessary to cover translated sidebar with overlay.
-            width: isSmallScreenWidth ? '100%' : '200%',
+            width: shouldUseNarrowLayout ? '100%' : '200%',
             // Excess space should be on the left so we need to position from right.
             right: 0,
         },
@@ -36,38 +36,38 @@ export default (isSmallScreenWidth: boolean, themeStyles: ThemeStyles): ScreenOp
     homeScreen: {
         title: CONFIG.SITE_TITLE,
         ...commonScreenOptions,
-        cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, props),
+        cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(shouldUseNarrowLayout, false, props),
 
         cardStyle: {
             ...getNavigationModalCardStyle(),
-            width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
+            width: shouldUseNarrowLayout ? '100%' : variables.sideBarWidth,
 
             // We need to shift the sidebar to not be covered by the StackNavigator so it can be clickable.
-            marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth,
-            ...(isSmallScreenWidth ? {} : themeStyles.borderRight),
+            marginLeft: shouldUseNarrowLayout ? 0 : -variables.sideBarWidth,
+            ...(shouldUseNarrowLayout ? {} : themeStyles.borderRight),
         },
     },
 
     fullScreen: {
         ...commonScreenOptions,
-        cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, true, props),
+        cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(shouldUseNarrowLayout, true, props),
         cardStyle: {
             ...getNavigationModalCardStyle(),
 
             // This is necessary to cover whole screen. Including translated sidebar.
-            marginLeft: isSmallScreenWidth ? 0 : -variables.sideBarWidth,
+            marginLeft: shouldUseNarrowLayout ? 0 : -variables.sideBarWidth,
         },
     },
 
     centralPaneNavigator: {
         title: CONFIG.SITE_TITLE,
         ...commonScreenOptions,
-        animationEnabled: isSmallScreenWidth,
-        cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, true, props),
+        animationEnabled: shouldUseNarrowLayout,
+        cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(shouldUseNarrowLayout, true, props),
 
         cardStyle: {
             ...getNavigationModalCardStyle(),
-            paddingRight: isSmallScreenWidth ? 0 : variables.sideBarWidth,
+            paddingRight: shouldUseNarrowLayout ? 0 : variables.sideBarWidth,
         },
     },
 });
diff --git a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts
index eff88422cc5c..5f5e552de9b4 100644
--- a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts
+++ b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts
@@ -3,11 +3,11 @@ import {Animated} from 'react-native';
 import getCardStyles from '@styles/utils/cardStyles';
 import variables from '@styles/variables';
 
-export default (isSmallScreenWidth: boolean, isFullScreenModal: boolean, {current: {progress}, inverted, layouts: {screen}}: StackCardInterpolationProps): StackCardInterpolatedStyle => {
+export default (shouldUseNarrowLayout: boolean, isFullScreenModal: boolean, {current: {progress}, inverted, layouts: {screen}}: StackCardInterpolationProps): StackCardInterpolatedStyle => {
     const translateX = Animated.multiply(
         progress.interpolate({
             inputRange: [0, 1],
-            outputRange: [isSmallScreenWidth ? screen.width : variables.sideBarWidth, 0],
+            outputRange: [shouldUseNarrowLayout ? screen.width : variables.sideBarWidth, 0],
             extrapolate: 'clamp',
         }),
         inverted,
@@ -15,7 +15,7 @@ export default (isSmallScreenWidth: boolean, isFullScreenModal: boolean, {curren
 
     const cardStyle = getCardStyles(screen.width);
 
-    if (!isFullScreenModal || isSmallScreenWidth) {
+    if (!isFullScreenModal || shouldUseNarrowLayout) {
         cardStyle.transform = [{translateX}];
     }
 
diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx
index 48523162ba2e..868af3f999bd 100644
--- a/src/libs/Navigation/NavigationRoot.tsx
+++ b/src/libs/Navigation/NavigationRoot.tsx
@@ -2,8 +2,8 @@ import {DefaultTheme, getPathFromState, NavigationContainer, NavigationState} fr
 import React, {useEffect, useMemo, useRef} from 'react';
 import useCurrentReportID from '@hooks/useCurrentReportID';
 import useFlipper from '@hooks/useFlipper';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import Log from '@libs/Log';
 import AppNavigator from './AppNavigator';
 import linkingConfig from './linkingConfig';
@@ -43,7 +43,7 @@ function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
     const theme = useTheme();
 
     const currentReportIDValue = useCurrentReportID();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     // https://reactnavigation.org/docs/themes
     const navigationTheme = useMemo(
@@ -65,11 +65,11 @@ function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
             firstRenderRef.current = false;
             return;
         }
-        if (!isSmallScreenWidth) {
+        if (!shouldUseNarrowLayout) {
             return;
         }
         Navigation.setShouldPopAllStateOnUP();
-    }, [isSmallScreenWidth]);
+    }, [shouldUseNarrowLayout]);
 
     useEffect(() => {
         if (!navigationRef.isReady() || !authenticated) {
@@ -77,7 +77,7 @@ function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
         }
         // We need to force state rehydration so the CustomRouter can add the CentralPaneNavigator route if necessary.
         navigationRef.resetRoot(navigationRef.getRootState());
-    }, [isSmallScreenWidth, authenticated]);
+    }, [shouldUseNarrowLayout, authenticated]);
 
     const handleStateChange = (state: NavigationState | undefined) => {
         if (!state) {
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index 6f45c0b33f5a..de94f17f463b 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -11,8 +11,8 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useNetwork from '@hooks/useNetwork';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
@@ -60,7 +60,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i
     const [filteredUserToInvite, setFilteredUserToInvite] = useState();
     const [selectedOptions, setSelectedOptions] = useState([]);
     const {isOffline} = useNetwork();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const maxParticipantsReached = selectedOptions.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
     const headerMessage = OptionsListUtils.getHeaderMessage(
@@ -263,7 +263,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i
                             autoFocus={false}
                         />
                     </View>
-                    {isSmallScreenWidth && <OfflineIndicator />}
+                    {shouldUseNarrowLayout && <OfflineIndicator />}
                 </KeyboardAvoidingView>
             )}
         </ScreenWrapper>
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 2182cc5f6359..207db3124f5e 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -20,6 +20,7 @@ import Text from '@components/Text';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -87,7 +88,8 @@ const defaultProps = {
 };
 
 function HeaderView(props) {
-    const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
+    const {windowWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -193,7 +195,7 @@ function HeaderView(props) {
     const defaultSubscriptSize = ReportUtils.isExpenseRequest(props.report) ? CONST.AVATAR_SIZE.SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT;
     const icons = ReportUtils.getIcons(reportHeaderData, props.personalDetails);
     const brickRoadIndicator = ReportUtils.hasReportNameError(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
-    const shouldShowBorderBottom = !isTaskReport || !isSmallScreenWidth;
+    const shouldShowBorderBottom = !isTaskReport || !shouldUseNarrowLayout;
     const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(props.report);
 
     const isLoading = !props.report || !title;
@@ -203,12 +205,12 @@ function HeaderView(props) {
             style={[styles.appContentHeader, shouldShowBorderBottom && styles.borderBottom]}
             dataSet={{dragArea: true}}
         >
-            <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && !isLoading && styles.pl5]}>
+            <View style={[styles.appContentHeaderTitle, !shouldUseNarrowLayout && !isLoading && styles.pl5]}>
                 {isLoading ? (
                     <ReportHeaderSkeletonView onBackButtonPress={props.onNavigationMenuButtonClicked} />
                 ) : (
                     <>
-                        {isSmallScreenWidth && (
+                        {shouldUseNarrowLayout && (
                             <PressableWithoutFeedback
                                 onPress={props.onNavigationMenuButtonClicked}
                                 style={[styles.LHNToggle]}
@@ -281,7 +283,7 @@ function HeaderView(props) {
                                 )}
                             </PressableWithoutFeedback>
                             <View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
-                                {isTaskReport && !isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}
+                                {isTaskReport && !shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}
                                 {shouldShowThreeDotsButton && (
                                     <ThreeDotsMenu
                                         anchorPosition={styles.threeDotsPopoverOffset(windowWidth)}
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 6afe7f92075b..b9c2e3ce91ce 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -19,8 +19,8 @@ import useAppFocusEvent from '@hooks/useAppFocusEvent';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import Timing from '@libs/actions/Timing';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
@@ -156,7 +156,7 @@ function ReportScreen({
 }) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {isOffline} = useNetwork();
 
     const firstRenderRef = useRef(true);
@@ -442,7 +442,7 @@ function ReportScreen({
                         shouldShow={shouldShowNotFoundPage}
                         subtitleKey="notFound.noAccess"
                         shouldShowCloseButton={false}
-                        shouldShowBackButton={isSmallScreenWidth}
+                        shouldShowBackButton={shouldUseNarrowLayout}
                         onBackButtonPress={Navigation.goBack}
                         shouldShowLink={false}
                     >
@@ -453,7 +453,7 @@ function ReportScreen({
                             needsOffscreenAlphaCompositing
                         >
                             {headerView}
-                            {ReportUtils.isTaskReport(report) && isSmallScreenWidth && ReportUtils.isOpenTaskReport(report, parentReportAction) && (
+                            {ReportUtils.isTaskReport(report) && shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(report, parentReportAction) && (
                                 <View style={[styles.borderBottom]}>
                                     <View style={[styles.appBG, styles.pl0]}>
                                         <View style={[styles.ph5, styles.pb3]}>
diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.tsx b/src/pages/home/report/AnimatedEmptyStateBackground.tsx
index 7e259b7473cf..68ed31d8a3be 100644
--- a/src/pages/home/report/AnimatedEmptyStateBackground.tsx
+++ b/src/pages/home/report/AnimatedEmptyStateBackground.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Animated, {SensorType, useAnimatedSensor, useAnimatedStyle, useSharedValue, withSpring} from 'react-native-reanimated';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeIllustrations from '@hooks/useThemeIllustrations';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -11,7 +12,8 @@ const IMAGE_OFFSET_Y = 75;
 
 function AnimatedEmptyStateBackground() {
     const StyleUtils = useStyleUtils();
-    const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
+    const {windowWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const illustrations = useThemeIllustrations();
     const IMAGE_OFFSET_X = windowWidth / 2;
 
@@ -25,7 +27,7 @@ function AnimatedEmptyStateBackground() {
 
     // Apply data to create style object
     const animatedStyles = useAnimatedStyle(() => {
-        if (!isSmallScreenWidth) {
+        if (!shouldUseNarrowLayout) {
             return {};
         }
         /*
@@ -44,7 +46,7 @@ function AnimatedEmptyStateBackground() {
     return (
         <Animated.Image
             source={illustrations.EmptyStateBackgroundImage}
-            style={[StyleUtils.getReportWelcomeBackgroundImageStyle(isSmallScreenWidth), animatedStyles]}
+            style={[StyleUtils.getReportWelcomeBackgroundImageStyle(shouldUseNarrowLayout), animatedStyles]}
             resizeMode={windowWidth > maxBackgroundWidth ? 'repeat' : 'cover'}
         />
     );
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
index 8def3a53ca0d..52670377bad6 100644
--- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
+++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
@@ -9,10 +9,10 @@ import withKeyboardState from '@components/withKeyboardState';
 import useDebounce from '@hooks/useDebounce';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
@@ -119,8 +119,8 @@ function ComposerWithSuggestions({
     });
     const commentRef = useRef(value);
 
-    const {isSmallScreenWidth} = useWindowDimensions();
-    const maxComposerLines = isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES;
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const maxComposerLines = shouldUseNarrowLayout ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES;
 
     const isEmptyChat = useMemo(() => _.size(reportActions) === 1, [reportActions]);
     const parentAction = ReportActionsUtils.getParentReportAction(report);
@@ -142,7 +142,7 @@ function ComposerWithSuggestions({
 
     const hasEnoughSpaceForLargeSuggestion = SuggestionUtils.hasEnoughSpaceForLargeSuggestionMenu(listHeight, composerHeight, suggestions.length);
 
-    const isAutoSuggestionPickerLarge = !isSmallScreenWidth || (isSmallScreenWidth && hasEnoughSpaceForLargeSuggestion);
+    const isAutoSuggestionPickerLarge = !shouldUseNarrowLayout || (shouldUseNarrowLayout && hasEnoughSpaceForLargeSuggestion);
 
     /**
      * Update frequently used emojis list. We debounce this method in the constructor so that UpdateFrequentlyUsedEmojis
@@ -334,7 +334,7 @@ function ComposerWithSuggestions({
 
     const triggerHotkeyActions = useCallback(
         (e) => {
-            if (!e || ComposerUtils.canSkipTriggerHotkeys(isSmallScreenWidth, isKeyboardShown)) {
+            if (!e || ComposerUtils.canSkipTriggerHotkeys(shouldUseNarrowLayout, isKeyboardShown)) {
                 return;
             }
 
@@ -364,7 +364,7 @@ function ComposerWithSuggestions({
                 }
             }
         },
-        [isKeyboardShown, isSmallScreenWidth, parentReportActions, report, reportActions, reportID, handleSendMessage, suggestionsRef, valueRef],
+        [isKeyboardShown, shouldUseNarrowLayout, parentReportActions, report, reportActions, reportID, handleSendMessage, suggestionsRef, valueRef],
     );
 
     const onSelectionChange = useCallback(
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
index b23d9b554488..003c7c5b1fbf 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
@@ -15,6 +15,7 @@ import {usePersonalDetails, withNetwork} from '@components/OnyxProvider';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLength';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
@@ -113,7 +114,8 @@ function ReportActionCompose({
 }) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isMediumScreenWidth, isSmallScreenWidth} = useWindowDimensions();
+    const {isMediumScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const animatedRef = useAnimatedRef();
     const actionButtonRef = useRef(null);
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
@@ -164,7 +166,7 @@ function ReportActionCompose({
 
     // If we are on a small width device then don't show last 3 items from conciergePlaceholderOptions
     const conciergePlaceholderRandomIndex = useMemo(
-        () => _.random(translate('reportActionCompose.conciergePlaceholderOptions').length - (isSmallScreenWidth ? 4 : 1)),
+        () => _.random(translate('reportActionCompose.conciergePlaceholderOptions').length - (shouldUseNarrowLayout ? 4 : 1)),
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [],
     );
@@ -441,10 +443,10 @@ function ReportActionCompose({
                             styles.flexRow,
                             styles.justifyContentBetween,
                             styles.alignItemsCenter,
-                            (!isSmallScreenWidth || (isSmallScreenWidth && !network.isOffline)) && styles.chatItemComposeSecondaryRow,
+                            (!shouldUseNarrowLayout || (shouldUseNarrowLayout && !network.isOffline)) && styles.chatItemComposeSecondaryRow,
                         ]}
                     >
-                        {!isSmallScreenWidth && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
+                        {!shouldUseNarrowLayout && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
                         <ReportTypingIndicator reportID={reportID} />
                         {hasExceededMaxCommentLength && <ExceededCommentLength />}
                     </View>
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 55b031c198e0..708ca40a3325 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -17,10 +17,10 @@ import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLen
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import useReportScrollManager from '@hooks/useReportScrollManager';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import * as ComposerUtils from '@libs/ComposerUtils';
 import * as EmojiUtils from '@libs/EmojiUtils';
@@ -87,7 +87,7 @@ function ReportActionItemMessageEdit(props) {
     const reportScrollManager = useReportScrollManager();
     const {translate, preferredLocale} = useLocalize();
     const {isKeyboardShown} = useKeyboardState();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const getInitialDraft = () => {
         if (props.draftMessage === props.action.message[0].html) {
@@ -352,7 +352,7 @@ function ReportActionItemMessageEdit(props) {
      */
     const triggerSaveOrCancel = useCallback(
         (e) => {
-            if (!e || ComposerUtils.canSkipTriggerHotkeys(isSmallScreenWidth, isKeyboardShown)) {
+            if (!e || ComposerUtils.canSkipTriggerHotkeys(shouldUseNarrowLayout, isKeyboardShown)) {
                 return;
             }
             if (e.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey && !e.shiftKey) {
@@ -363,7 +363,7 @@ function ReportActionItemMessageEdit(props) {
                 deleteDraft();
             }
         },
-        [deleteDraft, isKeyboardShown, isSmallScreenWidth, publishDraft],
+        [deleteDraft, isKeyboardShown, shouldUseNarrowLayout, publishDraft],
     );
 
     /**
@@ -417,7 +417,7 @@ function ReportActionItemMessageEdit(props) {
                             onChangeText={updateDraft} // Debounced saveDraftComment
                             onKeyPress={triggerSaveOrCancel}
                             value={draft}
-                            maxLines={isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES} // This is the same that slack has
+                            maxLines={shouldUseNarrowLayout ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES} // This is the same that slack has
                             style={[styles.textInputCompose, styles.flex1, styles.bgTransparent]}
                             onFocus={() => {
                                 setIsFocused(true);
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index eb4f9000d2b4..6857b04af442 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -12,10 +12,10 @@ import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Navigation from '@libs/Navigation/Navigation';
 import onyxSubscribe from '@libs/onyxSubscribe';
@@ -57,14 +57,14 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
     const StyleUtils = useStyleUtils();
     const modal = useRef({});
     const {translate, updateLocale} = useLocalize();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     useEffect(() => {
-        if (!isSmallScreenWidth) {
+        if (!shouldUseNarrowLayout) {
             return;
         }
         App.confirmReadyToOpenApp();
-    }, [isSmallScreenWidth]);
+    }, [shouldUseNarrowLayout]);
 
     useEffect(() => {
         App.setSidebarLoaded();
@@ -138,13 +138,17 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
             // or when continuously clicking different LHNs, only apply to small screen
             // since getTopmostReportId always returns on other devices
             const reportActionID = Navigation.getTopmostReportActionId();
-            if (isCreateMenuOpen || (option.reportID === Navigation.getTopmostReportId() && !reportActionID) || (isSmallScreenWidth && isActiveReport(option.reportID) && !reportActionID)) {
+            if (
+                isCreateMenuOpen ||
+                (option.reportID === Navigation.getTopmostReportId() && !reportActionID) ||
+                (shouldUseNarrowLayout && isActiveReport(option.reportID) && !reportActionID)
+            ) {
                 return;
             }
             Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(option.reportID));
             onLinkClick();
         },
-        [isCreateMenuOpen, isSmallScreenWidth, isActiveReport, onLinkClick],
+        [isCreateMenuOpen, shouldUseNarrowLayout, isActiveReport, onLinkClick],
     );
 
     const viewMode = priorityMode === CONST.PRIORITY_MODE.GSD ? CONST.OPTION_MODE.COMPACT : CONST.OPTION_MODE.DEFAULT;
@@ -184,7 +188,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
                     contentContainerStyles={StyleSheet.flatten([styles.sidebarListContainer, {paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}])}
                     data={optionListItems}
                     onSelectRow={showReportPage}
-                    shouldDisableFocusOptions={isSmallScreenWidth}
+                    shouldDisableFocusOptions={shouldUseNarrowLayout}
                     optionMode={viewMode}
                 />
                 {isLoading && optionListItems.length === 0 && (
diff --git a/src/pages/home/sidebar/SidebarScreen/index.js b/src/pages/home/sidebar/SidebarScreen/index.js
index 0b4c520c78a2..36681d66e0b7 100755
--- a/src/pages/home/sidebar/SidebarScreen/index.js
+++ b/src/pages/home/sidebar/SidebarScreen/index.js
@@ -1,5 +1,5 @@
 import React, {useCallback, useRef} from 'react';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import FreezeWrapper from '@libs/Navigation/FreezeWrapper';
 import BaseSidebarScreen from './BaseSidebarScreen';
 import FloatingActionButtonAndPopover from './FloatingActionButtonAndPopover';
@@ -7,7 +7,7 @@ import sidebarPropTypes from './sidebarPropTypes';
 
 function SidebarScreen(props) {
     const popoverModal = useRef(null);
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     /**
      * Method to hide popover when dragover.
@@ -34,7 +34,7 @@ function SidebarScreen(props) {
     };
 
     return (
-        <FreezeWrapper keepVisible={!isSmallScreenWidth}>
+        <FreezeWrapper keepVisible={!shouldUseNarrowLayout}>
             <BaseSidebarScreen
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
diff --git a/src/pages/home/sidebar/SidebarScreen/index.native.js b/src/pages/home/sidebar/SidebarScreen/index.native.js
index 36724c02d278..85261f996475 100755
--- a/src/pages/home/sidebar/SidebarScreen/index.native.js
+++ b/src/pages/home/sidebar/SidebarScreen/index.native.js
@@ -1,14 +1,14 @@
 import React from 'react';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import FreezeWrapper from '@libs/Navigation/FreezeWrapper';
 import BaseSidebarScreen from './BaseSidebarScreen';
 import FloatingActionButtonAndPopover from './FloatingActionButtonAndPopover';
 import sidebarPropTypes from './sidebarPropTypes';
 
 function SidebarScreen(props) {
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     return (
-        <FreezeWrapper keepVisible={!isSmallScreenWidth}>
+        <FreezeWrapper keepVisible={!shouldUseNarrowLayout}>
             <BaseSidebarScreen
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
diff --git a/src/pages/iou/ReceiptSelector/index.js b/src/pages/iou/ReceiptSelector/index.js
index adbfc0618de7..9fff0d059d88 100644
--- a/src/pages/iou/ReceiptSelector/index.js
+++ b/src/pages/iou/ReceiptSelector/index.js
@@ -15,9 +15,9 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -73,7 +73,7 @@ function ReceiptSelector({route, transactionID, iou, report}) {
     const [attachmentInvalidReason, setAttachmentValidReason] = useState('');
 
     const [receiptImageTopPosition, setReceiptImageTopPosition] = useState(0);
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {translate} = useLocalize();
     const {isDraggingOver} = useContext(DragAndDropContext);
 
@@ -271,12 +271,12 @@ function ReceiptSelector({route, transactionID, iou, report}) {
             >
                 <Text style={[styles.textReceiptUpload]}>{translate('receipt.upload')}</Text>
                 <Text style={[styles.subTextReceiptUpload]}>
-                    {isSmallScreenWidth ? translate('receipt.chooseReceipt') : translate('receipt.dragReceiptBeforeEmail')}
+                    {shouldUseNarrowLayout ? translate('receipt.chooseReceipt') : translate('receipt.dragReceiptBeforeEmail')}
                     <CopyTextToClipboard
                         text={CONST.EMAIL.RECEIPTS}
                         textStyles={[styles.textBlue]}
                     />
-                    {isSmallScreenWidth ? null : translate('receipt.dragReceiptAfterEmail')}
+                    {shouldUseNarrowLayout ? null : translate('receipt.dragReceiptAfterEmail')}
                 </Text>
             </View>
 
@@ -302,7 +302,7 @@ function ReceiptSelector({route, transactionID, iou, report}) {
     );
 
     return (
-        <View style={[styles.flex1, !Browser.isMobile() && styles.uploadReceiptView(isSmallScreenWidth)]}>
+        <View style={[styles.flex1, !Browser.isMobile() && styles.uploadReceiptView(shouldUseNarrowLayout)]}>
             {!isDraggingOver && (Browser.isMobile() ? mobileCameraView() : desktopUploadView())}
             <ReceiptDropUI
                 onDrop={(e) => {
diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.js b/src/pages/iou/request/step/IOURequestStepScan/index.js
index c51727f0143b..a5d634345486 100644
--- a/src/pages/iou/request/step/IOURequestStepScan/index.js
+++ b/src/pages/iou/request/step/IOURequestStepScan/index.js
@@ -13,9 +13,9 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
@@ -59,7 +59,7 @@ function IOURequestStepScan({
     const [attachmentInvalidReason, setAttachmentValidReason] = useState('');
 
     const [receiptImageTopPosition, setReceiptImageTopPosition] = useState(0);
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {translate} = useLocalize();
     const {isDraggingOver} = useContext(DragAndDropContext);
 
@@ -286,12 +286,12 @@ function IOURequestStepScan({
             >
                 <Text style={[styles.textReceiptUpload]}>{translate('receipt.upload')}</Text>
                 <Text style={[styles.subTextReceiptUpload]}>
-                    {isSmallScreenWidth ? translate('receipt.chooseReceipt') : translate('receipt.dragReceiptBeforeEmail')}
+                    {shouldUseNarrowLayout ? translate('receipt.chooseReceipt') : translate('receipt.dragReceiptBeforeEmail')}
                     <CopyTextToClipboard
                         text={CONST.EMAIL.RECEIPTS}
                         textStyles={[styles.textBlue]}
                     />
-                    {isSmallScreenWidth ? null : translate('receipt.dragReceiptAfterEmail')}
+                    {shouldUseNarrowLayout ? null : translate('receipt.dragReceiptAfterEmail')}
                 </Text>
             </View>
 
@@ -321,7 +321,7 @@ function IOURequestStepScan({
             shouldShowWrapper={Boolean(backTo)}
             testID={IOURequestStepScan.displayName}
         >
-            <View style={[styles.flex1, !Browser.isMobile() && styles.uploadReceiptView(isSmallScreenWidth)]}>
+            <View style={[styles.flex1, !Browser.isMobile() && styles.uploadReceiptView(shouldUseNarrowLayout)]}>
                 {!isDraggingOver && (Browser.isMobile() ? mobileCameraView() : desktopUploadView())}
                 <ReceiptDropUI
                     onDrop={(e) => {
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index 420d976dcd26..ed69dcedfd2d 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -11,6 +11,7 @@ import PressableWithDelayToggle from '@components/Pressable/PressableWithDelayTo
 import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -28,7 +29,8 @@ function CodesStep({account = defaultAccount, backTo}) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isExtraSmallScreenWidth, isSmallScreenWidth} = useWindowDimensions();
+    const {isExtraSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [error, setError] = useState('');
 
     const {setStep} = useTwoFactorAuthContext();
@@ -62,7 +64,7 @@ function CodesStep({account = defaultAccount, backTo}) {
                     <View style={styles.mv3}>
                         <Text>{translate('twoFactorAuth.codesLoseAccess')}</Text>
                     </View>
-                    <View style={styles.twoFactorAuthCodesBox({isExtraSmallScreenWidth, isSmallScreenWidth})}>
+                    <View style={styles.twoFactorAuthCodesBox({isExtraSmallScreenWidth, shouldUseNarrowLayout})}>
                         {account.isLoading ? (
                             <View style={styles.twoFactorLoadingContainer}>
                                 <ActivityIndicator color={theme.spinner} />
diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index e0577930b73d..8dbb7b7bf30f 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -20,6 +20,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import WalletSection from '@components/WalletSection';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -41,7 +42,8 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
+    const {windowWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [shouldShowAddPaymentMenu, setShouldShowAddPaymentMenu] = useState(false);
     const [shouldShowDefaultDeleteMenu, setShouldShowDefaultDeleteMenu] = useState(false);
     const [shouldShowLoadingSpinner, setShouldShowLoadingSpinner] = useState(false);
@@ -310,7 +312,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
         !(paymentMethod.formattedSelectedPaymentMethod.type === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT && paymentMethod.selectedPaymentMethod.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS);
 
     // Determines whether or not the modal popup is mounted from the bottom of the screen instead of the side mount on Web or Desktop screens
-    const isPopoverBottomMount = anchorPosition.anchorPositionTop === 0 || isSmallScreenWidth;
+    const isPopoverBottomMount = anchorPosition.anchorPositionTop === 0 || shouldUseNarrowLayout;
     const alertTextStyle = [styles.inlineSystemMessage, styles.flexShrink1];
     const alertViewStyle = [styles.flexRow, styles.alignItemsCenter, styles.w100, styles.ph5];
 
@@ -488,7 +490,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                         anchorRef={paymentMethodButtonRef}
                     >
                         {!showConfirmDeleteModal && (
-                            <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
+                            <View style={[styles.m5, !shouldUseNarrowLayout ? styles.sidebarPopover : '']}>
                                 {isPopoverBottomMount && (
                                     <MenuItem
                                         title={paymentMethod.formattedSelectedPaymentMethod.title || ''}
diff --git a/src/pages/signin/ChooseSSOOrMagicCode.js b/src/pages/signin/ChooseSSOOrMagicCode.js
index db985e525545..2922ac925950 100644
--- a/src/pages/signin/ChooseSSOOrMagicCode.js
+++ b/src/pages/signin/ChooseSSOOrMagicCode.js
@@ -8,8 +8,8 @@ import FormHelpMessage from '@components/FormHelpMessage';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as Session from '@userActions/Session';
@@ -56,12 +56,12 @@ function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     return (
         <>
             <View>
-                <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>{translate('samlSignIn.welcomeSAMLEnabled')}</Text>
+                <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !shouldUseNarrowLayout ? styles.textAlignLeft : {}]}>{translate('samlSignIn.welcomeSAMLEnabled')}</Text>
                 <Button
                     isDisabled={isOffline}
                     success
@@ -74,7 +74,7 @@ function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}) {
                 />
 
                 <View style={[styles.mt5]}>
-                    <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>
+                    <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !shouldUseNarrowLayout ? styles.textAlignLeft : {}]}>
                         {translate('samlSignIn.orContinueWithMagicCode')}
                     </Text>
                 </View>
diff --git a/src/pages/signin/LoginForm/BaseLoginForm.js b/src/pages/signin/LoginForm/BaseLoginForm.js
index aa158d66a936..2bf8cf4cae06 100644
--- a/src/pages/signin/LoginForm/BaseLoginForm.js
+++ b/src/pages/signin/LoginForm/BaseLoginForm.js
@@ -1,4 +1,4 @@
-import {useIsFocused} from '@react-navigation/native';
+import {useIsFocused, useRoute} from '@react-navigation/native';
 import Str from 'expensify-common/lib/str';
 import PropTypes from 'prop-types';
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
@@ -70,9 +70,6 @@ const propTypes = {
     /** Props to detect online status */
     network: networkPropTypes.isRequired,
 
-    /** Whether or not the sign in page is being rendered in the RHP modal */
-    isInModal: PropTypes.bool,
-
     isVisible: PropTypes.bool.isRequired,
 
     ...windowDimensionsPropTypes,
@@ -88,7 +85,6 @@ const defaultProps = {
     closeAccount: {},
     blurOnSubmit: false,
     innerRef: () => {},
-    isInModal: false,
 };
 
 function LoginForm(props) {
@@ -99,6 +95,7 @@ function LoginForm(props) {
     const prevIsVisible = usePrevious(props.isVisible);
     const firstBlurred = useRef(false);
     const isFocused = useIsFocused();
+    const route = useRoute();
 
     const {translate} = props;
 
@@ -210,7 +207,7 @@ function LoginForm(props) {
             return;
         }
         let focusTimeout;
-        if (props.isInModal) {
+        if (_.get(route, 'params.isInRHP', false)) {
             focusTimeout = setTimeout(() => input.current.focus(), CONST.ANIMATED_TRANSITION);
         } else {
             input.current.focus();
diff --git a/src/pages/signin/SignInHeroImage.js b/src/pages/signin/SignInHeroImage.js
index c665a09932c2..e7d4b64c3566 100644
--- a/src/pages/signin/SignInHeroImage.js
+++ b/src/pages/signin/SignInHeroImage.js
@@ -1,25 +1,20 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import Lottie from '@components/Lottie';
 import LottieAnimations from '@components/LottieAnimations';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 
 const propTypes = {
     ...windowDimensionsPropTypes,
-
-    shouldShowSmallScreen: PropTypes.bool,
-};
-
-const defaultProps = {
-    shouldShowSmallScreen: false,
 };
 
 function SignInHeroImage(props) {
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
     let imageSize;
-    if (props.isSmallScreenWidth || props.shouldShowSmallScreen) {
+    if (shouldUseNarrowLayout) {
         imageSize = {
             height: variables.signInHeroImageMobileHeight,
             width: variables.signInHeroImageMobileWidth,
@@ -49,6 +44,5 @@ function SignInHeroImage(props) {
 
 SignInHeroImage.displayName = 'SignInHeroImage';
 SignInHeroImage.propTypes = propTypes;
-SignInHeroImage.defaultProps = defaultProps;
 
 export default withWindowDimensions(SignInHeroImage);
diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js
index 10f048d31380..a025e6bdf4be 100644
--- a/src/pages/signin/SignInModal.js
+++ b/src/pages/signin/SignInModal.js
@@ -30,7 +30,7 @@ function SignInModal() {
             testID={SignInModal.displayName}
         >
             <HeaderWithBackButton onBackButtonPress={Navigation.dismissModal} />
-            <SignInPage isInModal />
+            <SignInPage />
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index 8cb0ef9907af..965326d31d78 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -9,10 +9,10 @@ import CustomStatusBarAndBackground from '@components/CustomStatusBarAndBackgrou
 import ThemeProvider from '@components/ThemeProvider';
 import ThemeStylesProvider from '@components/ThemeStylesProvider';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ActiveClientManager from '@libs/ActiveClientManager';
 import * as Localize from '@libs/Localize';
 import Log from '@libs/Log';
@@ -71,9 +71,6 @@ const propTypes = {
     /** Active Clients connected to ONYX Database */
     activeClients: PropTypes.arrayOf(PropTypes.string),
 
-    /** Whether or not the sign in page is being rendered in the RHP modal */
-    isInModal: PropTypes.bool,
-
     /** The user's preferred locale */
     preferredLocale: PropTypes.string,
 };
@@ -81,7 +78,6 @@ const propTypes = {
 const defaultProps = {
     account: {},
     credentials: {},
-    isInModal: false,
     activeClients: [],
     preferredLocale: '',
 };
@@ -132,12 +128,11 @@ function getRenderOptions({hasLogin, hasValidateCode, account, isPrimaryLogin, i
     };
 }
 
-function SignInPageInner({credentials, account, isInModal, activeClients, preferredLocale}) {
+function SignInPageInner({credentials, account, activeClients, preferredLocale}) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate, formatPhoneNumber} = useLocalize();
-    const {isSmallScreenWidth} = useWindowDimensions();
-    const shouldShowSmallScreen = isSmallScreenWidth || isInModal;
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const safeAreaInsets = useSafeAreaInsets();
     const signInPageLayoutRef = useRef();
     /** This state is needed to keep track of if user is using recovery code instead of 2fa code,
@@ -207,12 +202,12 @@ function SignInPageInner({credentials, account, isInModal, activeClients, prefer
         welcomeHeader = translate('welcomeText.anotherLoginPageIsOpen');
         welcomeText = translate('welcomeText.anotherLoginPageIsOpenExplanation');
     } else if (shouldShowLoginForm) {
-        welcomeHeader = isSmallScreenWidth ? headerText : translate('welcomeText.getStarted');
-        welcomeText = isSmallScreenWidth ? translate('welcomeText.getStarted') : '';
+        welcomeHeader = shouldUseNarrowLayout ? headerText : translate('welcomeText.getStarted');
+        welcomeText = shouldUseNarrowLayout ? translate('welcomeText.getStarted') : '';
     } else if (shouldShowValidateCodeForm) {
         if (account.requiresTwoFactorAuth) {
             // We will only know this after a user signs in successfully, without their 2FA code
-            welcomeHeader = isSmallScreenWidth ? '' : translate('welcomeText.welcomeBack');
+            welcomeHeader = shouldUseNarrowLayout ? '' : translate('welcomeText.welcomeBack');
             welcomeText = isUsingRecoveryCode ? translate('validateCodeForm.enterRecoveryCode') : translate('validateCodeForm.enterAuthenticatorCode');
         } else {
             const userLogin = Str.removeSMSDomain(credentials.login || '');
@@ -220,19 +215,19 @@ function SignInPageInner({credentials, account, isInModal, activeClients, prefer
             // replacing spaces with "hard spaces" to prevent breaking the number
             const userLoginToDisplay = Str.isSMSLogin(userLogin) ? formatPhoneNumber(userLogin).replace(/ /g, '\u00A0') : userLogin;
             if (account.validated) {
-                welcomeHeader = shouldShowSmallScreen ? '' : translate('welcomeText.welcomeBack');
-                welcomeText = shouldShowSmallScreen
+                welcomeHeader = shouldUseNarrowLayout ? '' : translate('welcomeText.welcomeBack');
+                welcomeText = shouldUseNarrowLayout
                     ? `${translate('welcomeText.welcomeBack')} ${translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay})}`
                     : translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay});
             } else {
-                welcomeHeader = shouldShowSmallScreen ? '' : translate('welcomeText.welcome');
-                welcomeText = shouldShowSmallScreen
+                welcomeHeader = shouldUseNarrowLayout ? '' : translate('welcomeText.welcome');
+                welcomeText = shouldUseNarrowLayout
                     ? `${translate('welcomeText.welcome')} ${translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay})}`
                     : translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay});
             }
         }
     } else if (shouldShowUnlinkLoginForm || shouldShowEmailDeliveryFailurePage || shouldShowChooseSSOOrMagicCode) {
-        welcomeHeader = shouldShowSmallScreen ? headerText : translate('welcomeText.welcomeBack');
+        welcomeHeader = shouldUseNarrowLayout ? headerText : translate('welcomeText.welcomeBack');
 
         // Don't show any welcome text if we're showing the user the email delivery failed view
         if (shouldShowEmailDeliveryFailurePage || shouldShowChooseSSOOrMagicCode) {
@@ -245,19 +240,17 @@ function SignInPageInner({credentials, account, isInModal, activeClients, prefer
     return (
         // Bottom SafeAreaView is removed so that login screen svg displays correctly on mobile.
         // The SVG should flow under the Home Indicator on iOS.
-        <View style={[styles.signInPage, StyleUtils.getSafeAreaPadding({...safeAreaInsets, bottom: 0, top: isInModal ? 0 : safeAreaInsets.top}, 1)]}>
+        <View style={[styles.signInPage, StyleUtils.getSafeAreaPadding({...safeAreaInsets, bottom: 0, top: shouldUseNarrowLayout ? 0 : safeAreaInsets.top}, 1)]}>
             <SignInPageLayout
                 welcomeHeader={welcomeHeader}
                 welcomeText={welcomeText}
-                shouldShowWelcomeHeader={shouldShowWelcomeHeader || !isSmallScreenWidth || !isInModal}
+                shouldShowWelcomeHeader={shouldShowWelcomeHeader || !shouldUseNarrowLayout}
                 shouldShowWelcomeText={shouldShowWelcomeText}
                 ref={signInPageLayoutRef}
-                shouldShowSmallScreen={shouldShowSmallScreen}
             >
                 {/* LoginForm must use the isVisible prop. This keeps it mounted, but visually hidden
              so that password managers can access the values. Conditionally rendering this component will break this feature. */}
                 <LoginForm
-                    isInModal={isInModal}
                     isVisible={shouldShowLoginForm}
                     blurOnSubmit={account.validated === false}
                     scrollPageToTop={signInPageLayoutRef.current && signInPageLayoutRef.current.scrollPageToTop}
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index 3837914a79bd..1b35c73fd0a3 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -8,6 +8,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -20,11 +21,6 @@ import CONST from '@src/CONST';
 const propTypes = {
     ...withLocalizePropTypes,
     scrollPageToTop: PropTypes.func.isRequired,
-    shouldShowSmallScreen: PropTypes.bool,
-};
-
-const defaultProps = {
-    shouldShowSmallScreen: false,
 };
 
 const navigateHome = (scrollPageToTop) => {
@@ -149,19 +145,19 @@ function Footer(props) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const isVertical = props.shouldShowSmallScreen;
-    const imageDirection = isVertical ? styles.flexRow : styles.flexColumn;
-    const imageStyle = isVertical ? styles.pr0 : styles.alignSelfCenter;
-    const columnDirection = isVertical ? styles.flexColumn : styles.flexRow;
-    const pageFooterWrapper = [styles.footerWrapper, imageDirection, imageStyle, isVertical ? styles.pl10 : {}];
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const imageDirection = shouldUseNarrowLayout ? styles.flexRow : styles.flexColumn;
+    const imageStyle = shouldUseNarrowLayout ? styles.pr0 : styles.alignSelfCenter;
+    const columnDirection = shouldUseNarrowLayout ? styles.flexColumn : styles.flexRow;
+    const pageFooterWrapper = [styles.footerWrapper, imageDirection, imageStyle, shouldUseNarrowLayout ? styles.pl10 : {}];
     const footerColumns = [styles.footerColumnsContainer, columnDirection];
-    const footerColumn = isVertical ? [styles.p4] : [styles.p4, props.isMediumScreenWidth ? styles.w50 : styles.w25];
-    const footerWrapper = isVertical ? [StyleUtils.getBackgroundColorStyle(theme.signInPage), styles.overflowHidden] : [];
+    const footerColumn = shouldUseNarrowLayout ? [styles.p4] : [styles.p4, props.isMediumScreenWidth ? styles.w50 : styles.w25];
+    const footerWrapper = shouldUseNarrowLayout ? [StyleUtils.getBackgroundColorStyle(theme.signInPage), styles.overflowHidden] : [];
 
     return (
         <View style={[styles.flex1]}>
             <View style={footerWrapper}>
-                {isVertical ? (
+                {shouldUseNarrowLayout ? (
                     <View style={[styles.signInPageGradientMobile]}>
                         <SignInGradient height="100%" />
                     </View>
@@ -204,8 +200,8 @@ function Footer(props) {
                             </View>
                         ))}
                     </View>
-                    <View style={[!isVertical && styles.footerBottomLogo]}>
-                        {!isVertical ? (
+                    <View style={[!shouldUseNarrowLayout && styles.footerBottomLogo]}>
+                        {!shouldUseNarrowLayout ? (
                             <Expensicons.ExpensifyFooterLogo />
                         ) : (
                             <Expensicons.ExpensifyFooterLogoVertical
@@ -222,6 +218,5 @@ function Footer(props) {
 
 Footer.propTypes = propTypes;
 Footer.displayName = 'Footer';
-Footer.defaultProps = defaultProps;
 
 export default withLocalize(Footer);
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index 5865c235335a..2be9a10c6575 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -7,9 +7,9 @@ import OfflineIndicator from '@components/OfflineIndicator';
 import SignInPageForm from '@components/SignInPageForm';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import SignInHeroImage from '@pages/signin/SignInHeroImage';
 import variables from '@styles/variables';
@@ -32,14 +32,11 @@ const propTypes = {
     /** Whether to show welcome header on a particular page */
     shouldShowWelcomeHeader: PropTypes.bool.isRequired,
 
-    /** Whether to show signIn hero image on a particular page */
-    shouldShowSmallScreen: PropTypes.bool.isRequired,
-
     ...withLocalizePropTypes,
 };
 
 function SignInPageContent(props) {
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
 
@@ -47,10 +44,10 @@ function SignInPageContent(props) {
         <View style={[styles.flex1, styles.signInPageLeftContainer]}>
             <View style={[styles.flex1, styles.alignSelfCenter, styles.signInPageWelcomeFormContainer]}>
                 {/* This empty view creates margin on the top of the sign in form which will shrink and grow depending on if the keyboard is open or not */}
-                <View style={[styles.flexGrow1, isSmallScreenWidth ? styles.signInPageContentTopSpacerSmallScreens : styles.signInPageContentTopSpacer]} />
+                <View style={[styles.flexGrow1, shouldUseNarrowLayout ? styles.signInPageContentTopSpacerSmallScreens : styles.signInPageContentTopSpacer]} />
                 <View style={[styles.flexGrow2, styles.mb8]}>
                     <SignInPageForm style={[styles.alignSelfStretch]}>
-                        <View style={[isSmallScreenWidth ? styles.mb8 : styles.mb15, isSmallScreenWidth ? styles.alignItemsCenter : styles.alignSelfStart]}>
+                        <View style={[shouldUseNarrowLayout ? styles.mb8 : styles.mb15, shouldUseNarrowLayout ? styles.alignItemsCenter : styles.alignSelfStart]}>
                             <ExpensifyWordmark />
                         </View>
                         <View style={[styles.signInPageWelcomeTextContainer]}>
@@ -61,7 +58,7 @@ function SignInPageContent(props) {
                                         StyleUtils.getLineHeightStyle(variables.lineHeightSignInHeroXSmall),
                                         StyleUtils.getFontSizeStyle(variables.fontSizeSignInHeroXSmall),
                                         !props.welcomeText ? styles.mb5 : {},
-                                        !isSmallScreenWidth ? styles.textAlignLeft : {},
+                                        !shouldUseNarrowLayout ? styles.textAlignLeft : {},
                                         styles.mb5,
                                     ]}
                                 >
@@ -69,7 +66,7 @@ function SignInPageContent(props) {
                                 </Text>
                             ) : null}
                             {props.shouldShowWelcomeText && props.welcomeText ? (
-                                <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>{props.welcomeText}</Text>
+                                <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !shouldUseNarrowLayout ? styles.textAlignLeft : {}]}>{props.welcomeText}</Text>
                             ) : null}
                         </View>
                         {props.children}
@@ -77,9 +74,9 @@ function SignInPageContent(props) {
                     <View style={[styles.mb8, styles.signInPageWelcomeTextContainer, styles.alignSelfCenter]}>
                         <OfflineIndicator style={[styles.m0, styles.pl0, styles.alignItemsStart]} />
                     </View>
-                    {props.shouldShowSmallScreen ? (
+                    {shouldUseNarrowLayout ? (
                         <View style={[styles.mt8]}>
-                            <SignInHeroImage shouldShowSmallScreen />
+                            <SignInHeroImage />
                         </View>
                     ) : null}
                 </View>
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index bc171dd1dc12..32a0e2becfce 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -5,6 +5,7 @@ import {withSafeAreaInsets} from 'react-native-safe-area-context';
 import SignInGradient from '@assets/images/home-fade-gradient.svg';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -38,9 +39,6 @@ const propTypes = {
     /** A reference so we can expose scrollPageToTop */
     innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
-    /** Whether or not the sign in page is being rendered in the RHP modal */
-    shouldShowSmallScreen: PropTypes.bool,
-
     /** Override the green headline copy */
     customHeadline: PropTypes.string,
 
@@ -52,7 +50,6 @@ const propTypes = {
 
 const defaultProps = {
     innerRef: () => {},
-    shouldShowSmallScreen: false,
     customHeadline: '',
     customHeroBody: '',
 };
@@ -66,11 +63,12 @@ function SignInPageLayout(props) {
     let containerStyles = [styles.flex1, styles.signInPageInner];
     let contentContainerStyles = [styles.flex1, styles.flexRow];
     const {windowHeight} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     // To scroll on both mobile and web, we need to set the container height manually
     const containerHeight = windowHeight - props.insets.top - props.insets.bottom;
 
-    if (props.shouldShowSmallScreen) {
+    if (shouldUseNarrowLayout) {
         containerStyles = [styles.flex1];
         contentContainerStyles = [styles.flex1, styles.flexColumn];
     }
@@ -98,7 +96,7 @@ function SignInPageLayout(props) {
 
     return (
         <View style={containerStyles}>
-            {!props.shouldShowSmallScreen ? (
+            {!shouldUseNarrowLayout ? (
                 <View style={contentContainerStyles}>
                     <ScrollView
                         keyboardShouldPersistTaps="handled"
@@ -110,7 +108,6 @@ function SignInPageLayout(props) {
                             welcomeText={props.welcomeText}
                             shouldShowWelcomeText={props.shouldShowWelcomeText}
                             shouldShowWelcomeHeader={props.shouldShowWelcomeHeader}
-                            shouldShowSmallScreen={props.shouldShowSmallScreen}
                         >
                             {props.children}
                         </SignInPageContent>
@@ -170,16 +167,12 @@ function SignInPageLayout(props) {
                             welcomeText={props.welcomeText}
                             shouldShowWelcomeText={props.shouldShowWelcomeText}
                             shouldShowWelcomeHeader={props.shouldShowWelcomeHeader}
-                            shouldShowSmallScreen={props.shouldShowSmallScreen}
                         >
                             {props.children}
                         </SignInPageContent>
                     </View>
                     <View style={[styles.flex0]}>
-                        <Footer
-                            scrollPageToTop={scrollPageToTop}
-                            shouldShowSmallScreen
-                        />
+                        <Footer scrollPageToTop={scrollPageToTop} />
                     </View>
                 </ScrollView>
             )}
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 6f86e871e8ae..60d3ac5edafc 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -21,8 +21,8 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -101,7 +101,7 @@ function WorkspaceNewRoomPage(props) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
-    const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [visibility, setVisibility] = useState(CONST.REPORT.VISIBILITY.RESTRICTED);
     const [policyID, setPolicyID] = useState(null);
     const [writeCapability, setWriteCapability] = useState(CONST.REPORT.WRITE_CAPABILITIES.ALL);
@@ -244,7 +244,7 @@ function WorkspaceNewRoomPage(props) {
                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
                 style={[styles.mh5, styles.mb5]}
             />
-            {isSmallScreenWidth && <OfflineIndicator />}
+            {shouldUseNarrowLayout && <OfflineIndicator />}
         </>
     );
 
@@ -333,7 +333,7 @@ function WorkspaceNewRoomPage(props) {
                                 </View>
                                 <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
                             </FormProvider>
-                            {isSmallScreenWidth && <OfflineIndicator />}
+                            {shouldUseNarrowLayout && <OfflineIndicator />}
                         </KeyboardAvoidingView>
                     )
                 }
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 67be7cce1642..5e1118174df5 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -58,7 +58,7 @@ type CustomPickerStyle = PickerStyle & {icon?: ViewStyle};
 
 type OverlayStylesParams = {progress: Animated.AnimatedInterpolation<string | number>};
 
-type TwoFactorAuthCodesBoxParams = {isExtraSmallScreenWidth: boolean; isSmallScreenWidth: boolean};
+type TwoFactorAuthCodesBoxParams = {isExtraSmallScreenWidth: boolean; shouldUseNarrowLayout: boolean};
 
 type Translation = 'perspective' | 'rotate' | 'rotateX' | 'rotateY' | 'rotateZ' | 'scale' | 'scaleX' | 'scaleY' | 'translateX' | 'translateY' | 'skewX' | 'skewY' | 'matrix';
 
@@ -122,10 +122,10 @@ const headlineFont = {
     fontWeight: '500',
 } satisfies TextStyle;
 
-const modalNavigatorContainer = (isSmallScreenWidth: boolean) =>
+const modalNavigatorContainer = (shouldUseNarrowLayout: boolean) =>
     ({
         position: 'absolute',
-        width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
+        width: shouldUseNarrowLayout ? '100%' : variables.sideBarWidth,
         height: '100%',
     } satisfies ViewStyle);
 
@@ -814,10 +814,10 @@ const styles = (theme: ThemeColors) =>
             color: theme.textSupporting,
         },
 
-        uploadReceiptView: (isSmallScreenWidth: boolean) =>
+        uploadReceiptView: (shouldUseNarrowLayout: boolean) =>
             ({
                 borderRadius: variables.componentBorderRadiusLarge,
-                borderWidth: isSmallScreenWidth ? 0 : 2,
+                borderWidth: shouldUseNarrowLayout ? 0 : 2,
                 borderColor: theme.borderFocus,
                 borderStyle: 'dotted',
                 marginBottom: 20,
@@ -1415,9 +1415,9 @@ const styles = (theme: ThemeColors) =>
             height: variables.lineHeightSizeh1,
         },
 
-        RHPNavigatorContainer: (isSmallScreenWidth: boolean) =>
+        RHPNavigatorContainer: (shouldUseNarrowLayout: boolean) =>
             ({
-                ...modalNavigatorContainer(isSmallScreenWidth),
+                ...modalNavigatorContainer(shouldUseNarrowLayout),
                 right: 0,
             } satisfies ViewStyle),
 
@@ -2220,16 +2220,16 @@ const styles = (theme: ThemeColors) =>
             outline: 'none',
         },
 
-        getPDFPasswordFormStyle: (isSmallScreenWidth: boolean) =>
+        getPDFPasswordFormStyle: (shouldUseNarrowLayout: boolean) =>
             ({
-                width: isSmallScreenWidth ? '100%' : 350,
-                ...(isSmallScreenWidth && flex.flex1),
+                width: shouldUseNarrowLayout ? '100%' : 350,
+                ...(shouldUseNarrowLayout && flex.flex1),
             } satisfies ViewStyle),
 
-        centeredModalStyles: (isSmallScreenWidth: boolean, isFullScreenWhenSmall: boolean) =>
+        centeredModalStyles: (shouldUseNarrowLayout: boolean, isFullScreenWhenSmall: boolean) =>
             ({
-                borderWidth: isSmallScreenWidth && !isFullScreenWhenSmall ? 1 : 0,
-                marginHorizontal: isSmallScreenWidth ? 0 : 20,
+                borderWidth: shouldUseNarrowLayout && !isFullScreenWhenSmall ? 1 : 0,
+                marginHorizontal: shouldUseNarrowLayout ? 0 : 20,
             } satisfies ViewStyle),
 
         imageModalImageCenterContainer: {
@@ -2314,10 +2314,10 @@ const styles = (theme: ThemeColors) =>
             padding: 0,
         },
 
-        twoFactorAuthCodesBox: ({isExtraSmallScreenWidth, isSmallScreenWidth}: TwoFactorAuthCodesBoxParams) => {
+        twoFactorAuthCodesBox: ({isExtraSmallScreenWidth, shouldUseNarrowLayout}: TwoFactorAuthCodesBoxParams) => {
             let paddingHorizontal = spacing.ph9;
 
-            if (isSmallScreenWidth) {
+            if (shouldUseNarrowLayout) {
                 paddingHorizontal = spacing.ph4;
             }
 
@@ -2434,7 +2434,7 @@ const styles = (theme: ThemeColors) =>
             borderRadius: 88,
         },
 
-        rootNavigatorContainerStyles: (isSmallScreenWidth: boolean) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1} satisfies ViewStyle),
+        rootNavigatorContainerStyles: (shouldUseNarrowLayout: boolean) => ({marginLeft: shouldUseNarrowLayout ? 0 : variables.sideBarWidth, flex: 1} satisfies ViewStyle),
         RHPNavigatorContainerNavigatorContainerStyles: (isSmallScreenWidth: boolean) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1} satisfies ViewStyle),
 
         avatarInnerTextChat: {
diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts
index 67faec504d61..134fe6f92eb4 100644
--- a/src/styles/utils/generators/ModalStyleUtils.ts
+++ b/src/styles/utils/generators/ModalStyleUtils.ts
@@ -6,12 +6,12 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import StyleUtilGenerator from './types';
 
-function getCenteredModalStyles(styles: ThemeStyles, windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle {
-    const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, isFullScreenWhenSmall);
+function getCenteredModalStyles(styles: ThemeStyles, windowWidth: number, shouldUseNarrowLayout: boolean, isFullScreenWhenSmall = false): ViewStyle {
+    const modalStyles = styles.centeredModalStyles(shouldUseNarrowLayout, isFullScreenWhenSmall);
 
     return {
         borderWidth: modalStyles.borderWidth,
-        width: isSmallScreenWidth ? '100%' : windowWidth - modalStyles.marginHorizontal * 2,
+        width: shouldUseNarrowLayout ? '100%' : windowWidth - modalStyles.marginHorizontal * 2,
     };
 }
 
@@ -20,7 +20,6 @@ type ModalType = ValueOf<typeof CONST.MODAL.MODAL_TYPE>;
 type WindowDimensions = {
     windowWidth: number;
     windowHeight: number;
-    isSmallScreenWidth: boolean;
 };
 
 type GetModalStyles = {
@@ -40,6 +39,7 @@ type GetModalStylesStyleUtil = {
     getModalStyles: (
         type: ModalType | undefined,
         windowDimensions: WindowDimensions,
+        shouldUseNarrowLayout: boolean,
         popoverAnchorPosition?: ViewStyle,
         innerContainerStyle?: ViewStyle,
         outerStyle?: ViewStyle,
@@ -47,8 +47,8 @@ type GetModalStylesStyleUtil = {
 };
 
 const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({theme, styles}) => ({
-    getModalStyles: (type, windowDimensions, popoverAnchorPosition = {}, innerContainerStyle = {}, outerStyle = {}): GetModalStyles => {
-        const {isSmallScreenWidth, windowWidth} = windowDimensions;
+    getModalStyles: (type, windowDimensions, shouldUseNarrowLayout, popoverAnchorPosition = {}, innerContainerStyle = {}, outerStyle = {}): GetModalStyles => {
+        const {windowWidth} = windowDimensions;
 
         let modalStyle: GetModalStyles['modalStyle'] = {
             margin: 0,
@@ -102,20 +102,20 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                 modalContainerStyle = {
                     boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)',
                     flex: 1,
-                    marginTop: isSmallScreenWidth ? 0 : 20,
-                    marginBottom: isSmallScreenWidth ? 0 : 20,
-                    borderRadius: isSmallScreenWidth ? 0 : 12,
+                    marginTop: shouldUseNarrowLayout ? 0 : 20,
+                    marginBottom: shouldUseNarrowLayout ? 0 : 20,
+                    borderRadius: shouldUseNarrowLayout ? 0 : 12,
                     overflow: 'hidden',
-                    ...getCenteredModalStyles(styles, windowWidth, isSmallScreenWidth),
+                    ...getCenteredModalStyles(styles, windowWidth, shouldUseNarrowLayout),
                 };
 
                 // Allow this modal to be dismissed with a swipe down or swipe right
                 swipeDirection = ['down', 'right'];
-                animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn';
-                animationOut = isSmallScreenWidth ? 'slideOutRight' : 'fadeOut';
-                shouldAddTopSafeAreaMargin = !isSmallScreenWidth;
-                shouldAddBottomSafeAreaMargin = !isSmallScreenWidth;
-                shouldAddTopSafeAreaPadding = isSmallScreenWidth;
+                animationIn = shouldUseNarrowLayout ? 'slideInRight' : 'fadeIn';
+                animationOut = shouldUseNarrowLayout ? 'slideOutRight' : 'fadeOut';
+                shouldAddTopSafeAreaMargin = !shouldUseNarrowLayout;
+                shouldAddBottomSafeAreaMargin = !shouldUseNarrowLayout;
+                shouldAddTopSafeAreaPadding = shouldUseNarrowLayout;
                 shouldAddBottomSafeAreaPadding = false;
                 break;
             case CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE:
@@ -129,18 +129,18 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                 modalContainerStyle = {
                     boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)',
                     flex: 1,
-                    marginTop: isSmallScreenWidth ? 0 : 20,
-                    marginBottom: isSmallScreenWidth ? 0 : 20,
-                    borderRadius: isSmallScreenWidth ? 0 : 12,
+                    marginTop: shouldUseNarrowLayout ? 0 : 20,
+                    marginBottom: shouldUseNarrowLayout ? 0 : 20,
+                    borderRadius: shouldUseNarrowLayout ? 0 : 12,
                     overflow: 'hidden',
-                    ...getCenteredModalStyles(styles, windowWidth, isSmallScreenWidth, true),
+                    ...getCenteredModalStyles(styles, windowWidth, shouldUseNarrowLayout, true),
                 };
                 swipeDirection = undefined;
-                animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn';
-                animationOut = isSmallScreenWidth ? 'slideOutRight' : 'fadeOut';
-                shouldAddTopSafeAreaMargin = !isSmallScreenWidth;
-                shouldAddBottomSafeAreaMargin = !isSmallScreenWidth;
-                shouldAddTopSafeAreaPadding = isSmallScreenWidth;
+                animationIn = shouldUseNarrowLayout ? 'slideInRight' : 'fadeIn';
+                animationOut = shouldUseNarrowLayout ? 'slideOutRight' : 'fadeOut';
+                shouldAddTopSafeAreaMargin = !shouldUseNarrowLayout;
+                shouldAddBottomSafeAreaMargin = !shouldUseNarrowLayout;
+                shouldAddTopSafeAreaPadding = shouldUseNarrowLayout;
                 shouldAddBottomSafeAreaPadding = false;
                 break;
             case CONST.MODAL.MODAL_TYPE.CENTERED_SMALL:
@@ -216,21 +216,21 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                 modalStyle = {
                     ...modalStyle,
                     ...{
-                        marginLeft: isSmallScreenWidth ? 0 : windowWidth - variables.sideBarWidth,
-                        width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
+                        marginLeft: shouldUseNarrowLayout ? 0 : windowWidth - variables.sideBarWidth,
+                        width: shouldUseNarrowLayout ? '100%' : variables.sideBarWidth,
                         flexDirection: 'row',
                         justifyContent: 'flex-end',
                     },
                 };
                 modalContainerStyle = {
-                    width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
+                    width: shouldUseNarrowLayout ? '100%' : variables.sideBarWidth,
                     height: '100%',
                     overflow: 'hidden',
                 };
 
                 animationIn = {
                     from: {
-                        translateX: isSmallScreenWidth ? windowWidth : variables.sideBarWidth,
+                        translateX: shouldUseNarrowLayout ? windowWidth : variables.sideBarWidth,
                     },
                     to: {
                         translateX: 0,
@@ -241,7 +241,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                         translateX: 0,
                     },
                     to: {
-                        translateX: isSmallScreenWidth ? windowWidth : variables.sideBarWidth,
+                        translateX: shouldUseNarrowLayout ? windowWidth : variables.sideBarWidth,
                     },
                 };
                 hideBackdrop = true;
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 7a5df1657c99..2912e67a6cfa 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -540,8 +540,8 @@ function getCodeFontSize(isInsideH1: boolean) {
 /**
  * Gives the width for Emoji picker Widget
  */
-function getEmojiPickerStyle(isSmallScreenWidth: boolean): ViewStyle {
-    if (isSmallScreenWidth) {
+function getEmojiPickerStyle(shouldUseNarrowLayout: boolean): ViewStyle {
+    if (shouldUseNarrowLayout) {
         return {
             width: CONST.SMALL_EMOJI_PICKER_SIZE.WIDTH,
         };
@@ -701,10 +701,10 @@ function getHorizontalStackedOverlayAvatarStyle(oneAvatarSize: AvatarSize, oneAv
 /**
  * Gets the correct size for the empty state background image based on screen dimensions
  */
-function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean, isMoneyReport = false): ImageStyle {
+function getReportWelcomeBackgroundImageStyle(shouldUseNarrowLayout: boolean, isMoneyReport = false): ImageStyle {
     const emptyStateBackground = isMoneyReport ? CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT : CONST.EMPTY_STATE_BACKGROUND;
 
-    if (isSmallScreenWidth) {
+    if (shouldUseNarrowLayout) {
         return {
             height: emptyStateBackground.SMALL_SCREEN.IMAGE_HEIGHT,
             width: '200%',
@@ -947,7 +947,7 @@ function getDropDownButtonHeight(buttonSize: ButtonSizeValue): ViewStyle {
 /**
  * Returns fitting fontSize and lineHeight values in order to prevent large amounts from being cut off on small screen widths.
  */
-function getAmountFontSizeAndLineHeight(isSmallScreenWidth: boolean, windowWidth: number, displayAmountLength: number, numberOfParticipant: number): TextStyle {
+function getAmountFontSizeAndLineHeight(shouldUseNarrowLayout: boolean, windowWidth: number, displayAmountLength: number, numberOfParticipant: number): TextStyle {
     let toSubtract = 0;
     const baseFontSize = variables.fontSizeXLarge;
     const baseLineHeight = variables.lineHeightXXLarge;
@@ -956,7 +956,7 @@ function getAmountFontSizeAndLineHeight(isSmallScreenWidth: boolean, windowWidth
     const differentWithMaxLength = 17 - displayAmountLength;
 
     // with a window width is more than 420px the maximum amount will not be cut off with the maximum avatar displays
-    if (isSmallScreenWidth && windowWidth < 420) {
+    if (shouldUseNarrowLayout && windowWidth < 420) {
         // Based on width Difference we can see the max length of amount can be displayed with the number of avatars.
         // From there we can calculate subtract in accordance with the number of avatar and the length of amount text
         const widthDifference = 420 - windowWidth;