diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx index 90f6036fc8da..28f7e7317179 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx @@ -4,6 +4,7 @@ import ActivityIndicator from '@components/ActivityIndicator'; import Button from '@components/Button'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import {PressableWithFeedback} from '@components/Pressable'; +import ScrollView from '@components/ScrollView'; import type {SearchColumnType} from '@components/Search/types'; import SearchTableHeader, {getExpenseHeaders} from '@components/SelectionListWithSections/SearchTableHeader'; import type {ListItem, TransactionGroupListExpandedProps, TransactionListItemType} from '@components/SelectionListWithSections/types'; @@ -16,9 +17,10 @@ import useOnyx from '@hooks/useOnyx'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import {getReportIDForTransaction} from '@libs/MoneyRequestReportUtils'; import Navigation from '@libs/Navigation/Navigation'; -import {createAndOpenSearchTransactionThread, getColumnsToShow} from '@libs/SearchUIUtils'; +import {createAndOpenSearchTransactionThread, getColumnsToShow, getTableMinWidth} from '@libs/SearchUIUtils'; import {getTransactionViolations} from '@libs/TransactionUtils'; import {setActiveTransactionIDs} from '@userActions/TransactionThreadNavigation'; import CONST from '@src/CONST'; @@ -50,6 +52,7 @@ function TransactionGroupListExpanded({ }: TransactionGroupListExpandedProps) { const theme = useTheme(); const styles = useThemeStyles(); + const {windowWidth} = useWindowDimensions(); const currentUserDetails = useCurrentUserPersonalDetails(); const {translate} = useLocalize(); const [isMobileSelectionModeEnabled] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE, {canBeMissing: true}); @@ -174,8 +177,11 @@ function TransactionGroupListExpanded({ openReportInRHP(transaction); }; - return ( - <> + const minTableWidth = getTableMinWidth(columns ?? []); + const shouldScrollHorizontally = isLargeScreenWidth && minTableWidth > windowWidth; + + const content = ( + {isLargeScreenWidth && ( ({ /> )} - + + ); + + return shouldScrollHorizontally ? ( + + {content} + + ) : ( + content ); } diff --git a/tests/unit/TransactionGroupListItemTest.tsx b/tests/unit/TransactionGroupListItemTest.tsx index a6d46d6544bc..085eefb48f38 100644 --- a/tests/unit/TransactionGroupListItemTest.tsx +++ b/tests/unit/TransactionGroupListItemTest.tsx @@ -21,6 +21,7 @@ jest.mock('@libs/actions/Search', () => ({ jest.mock('@libs/SearchUIUtils', () => ({ getSections: jest.fn(() => []), isCorrectSearchUserName: jest.fn(() => true), + getTableMinWidth: jest.fn(() => 0), })); const mockTransaction: TransactionListItemType = {