diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 3caf7a15d50e..8bf07e2d3a02 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -177,7 +177,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false); const isReportInRHP = isReportOpenInRHP(navigationRef?.getRootState()); - const shouldDisplaySearchRouter = !isReportInRHP; + const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth; const confirmPayment = useCallback( (type?: PaymentMethodType | undefined, payAsBusiness?: boolean) => { diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx index 2dde3e9e2aa9..93ac363cff62 100644 --- a/src/components/MoneyRequestHeader.tsx +++ b/src/components/MoneyRequestHeader.tsx @@ -66,7 +66,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre const reportID = report?.reportID; const isReportInRHP = isReportOpenInRHP(navigationRef?.getRootState()); - const shouldDisplaySearchRouter = !isReportInRHP; + const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth; const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation([transaction?.transactionID ?? '-1']); diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index 71051b0986c0..f3a98089b2b1 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -21,6 +21,7 @@ import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import isReportOpenInRHP from '@libs/Navigation/isReportOpenInRHP'; @@ -64,6 +65,8 @@ const fallbackIcon: IconType = { }; function HeaderView({report, parentReportAction, reportID, onNavigationMenuButtonClicked, shouldUseNarrowLayout = false}: HeaderViewProps) { + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth + const {isSmallScreenWidth} = useResponsiveLayout(); const [isDeleteTaskConfirmModalVisible, setIsDeleteTaskConfirmModalVisible] = React.useState(false); const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : -1}`); // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing @@ -145,7 +148,7 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto const isLoading = !report?.reportID || !title; const isReportInRHP = isReportOpenInRHP(navigationRef?.getRootState()); - const shouldDisplaySearchRouter = !isReportInRHP; + const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth; const isChatUsedForOnboarding = ReportUtils.isChatUsedForOnboarding(report); return (