Fix group by scroll blocker

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<TItem extends ListItem>({
 }: TransactionGroupListExpandedProps<TItem>) {
     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<TItem extends ListItem>({
         openReportInRHP(transaction);
     };
 
-    return (
-        <>
+    const minTableWidth = getTableMinWidth(columns ?? []);
+    const shouldScrollHorizontally = isLargeScreenWidth && minTableWidth > windowWidth;
+
+    const content = (
+        <View style={[styles.flexColumn, styles.flex1]}>
             {isLargeScreenWidth && (
                 <View style={[styles.searchListHeaderContainerStyle, styles.groupSearchListTableContainerStyle, styles.bgTransparent, styles.pl9, styles.pr11]}>
                     <SearchTableHeader
@@ -270,7 +276,20 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
                     />
                 </View>
             )}
-        </>
+        </View>
+    );
+
+    return shouldScrollHorizontally ? (
+        <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator
+            style={styles.flex1}
+            contentContainerStyle={{width: minTableWidth}}
+        >
+            {content}
+        </ScrollView>
+    ) : (
+        content
     );
 }
 

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 = {