diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 420b1584fc77..04c00b51e9b6 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -73,6 +73,9 @@ type MoneyRequestReportTransactionItemProps = { /** Whether this is the last item in the list */ isLastItem?: boolean; + + /** Whether the list is horizontally scrollable */ + shouldScrollHorizontally?: boolean; }; function MoneyRequestReportTransactionItem({ @@ -93,6 +96,7 @@ function MoneyRequestReportTransactionItem({ shouldBeHighlighted, nonPersonalAndWorkspaceCards, isLastItem = false, + shouldScrollHorizontally = false, }: MoneyRequestReportTransactionItemProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); @@ -164,7 +168,7 @@ function MoneyRequestReportTransactionItem({ amountColumnSize={amountColumnSize} taxAmountColumnSize={taxAmountColumnSize} shouldShowTooltip - shouldUseNarrowLayout={shouldUseNarrowLayout || isMediumScreenWidth} + shouldUseNarrowLayout={shouldUseNarrowLayout || (isMediumScreenWidth && !shouldScrollHorizontally)} shouldShowCheckbox={!!isSelectionModeEnabled || !isSmallScreenWidth} onCheckboxPress={toggleTransaction} columns={columns} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index ea213c62995d..f1bb64bd2622 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -593,6 +593,7 @@ function MoneyRequestReportTransactionList({ onArrowRightPress={handleArrowRightPress} nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards ?? {}} isLastItem={!showPendingExpensePlaceholder && transaction.transactionID === lastTransactionID} + shouldScrollHorizontally={shouldScrollHorizontally} /> ); diff --git a/src/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx index fb58fc366456..c63c12b6f78d 100644 --- a/src/components/TransactionItemRow/index.tsx +++ b/src/components/TransactionItemRow/index.tsx @@ -597,7 +597,7 @@ function TransactionItemRow({ return (