fix spacing

Author: bernhardoj

src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx

@@ -129,6 +129,7 @@ function MoneyRequestReportTransactionItem({
                     onCheckboxPress={toggleTransaction}
                     columns={columns as Array<ValueOf<typeof CONST.REPORT.TRANSACTION_LIST.COLUMNS>>}
                     isDisabled={isPendingDelete}
+                    style={[styles.p3, shouldUseNarrowLayout ? styles.pt2 : {}]}
                 />
             </PressableWithFeedback>
         </OfflineWithFeedback>

src/components/SelectionList/Search/TransactionGroupListItem.tsx

@@ -60,7 +60,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
     const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${groupItem?.policyID}`];
     const isEmpty = groupItem.transactions.length === 0;
     const isDisabledOrEmpty = isEmpty || isDisabled;
-    const {isLargeScreenWidth} = useResponsiveLayout();
+    const {isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
     const {currentSearchHash} = useSearchContext();
 
     const {amountColumnSize, dateColumnSize, taxAmountColumnSize} = useMemo(() => {
@@ -208,7 +208,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
                                 onButtonPress={() => {
                                     openReportInRHP(transaction);
                                 }}
-                                columnWrapperStyles={[styles.ph3, styles.pv1Half]}
+                                style={shouldUseNarrowLayout ? [styles.p3, styles.pt2] : [styles.ph3, styles.pv1Half, styles.noBorderRadius]}
                                 isReportItemChild
                                 isInSingleTransactionReport={groupItem.transactions.length === 1}
                             />

src/components/SelectionList/Search/TransactionListItem.tsx

@@ -123,6 +123,7 @@ function TransactionListItem<TItem extends ListItem>({
                     amountColumnSize={amountColumnSize}
                     taxAmountColumnSize={taxAmountColumnSize}
                     shouldShowCheckbox={!!canSelectMultiple}
+                    style={[styles.p3, shouldUseNarrowLayout ? styles.pt2 : {}]}
                 />
             </PressableWithFeedback>
         </OfflineWithFeedback>

src/components/TransactionItemRow/index.tsx

@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
-import type {ViewStyle} from 'react-native';
+import type {StyleProp, ViewStyle} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import Checkbox from '@components/Checkbox';
 import type {TransactionWithOptionalHighlight} from '@components/MoneyRequestReportView/MoneyRequestReportTransactionList';
@@ -89,7 +89,7 @@ type TransactionItemRowProps = {
     shouldShowCheckbox: boolean;
     columns?: Array<ValueOf<typeof CONST.REPORT.TRANSACTION_LIST.COLUMNS>>;
     onButtonPress?: () => void;
-    columnWrapperStyles?: ViewStyle[];
+    style?: StyleProp<ViewStyle>;
     isReportItemChild?: boolean;
     isActionLoading?: boolean;
     isInSingleTransactionReport?: boolean;
@@ -121,7 +121,7 @@ function TransactionItemRow({
     shouldShowCheckbox = false,
     columns,
     onButtonPress = () => {},
-    columnWrapperStyles,
+    style,
     isReportItemChild = false,
     isActionLoading,
     isInSingleTransactionReport = false,
@@ -360,14 +360,13 @@ function TransactionItemRow({
             transactionItem,
         ],
     );
-    const safeColumnWrapperStyle = columnWrapperStyles ?? [styles.p3, styles.expenseWidgetRadius];
     const shouldRenderChatBubbleCell = useMemo(() => {
         return columns?.includes(CONST.REPORT.TRANSACTION_LIST.COLUMNS.COMMENTS) ?? false;
     }, [columns]);
 
     if (shouldUseNarrowLayout) {
         return (
-            <View style={[styles.expenseWidgetRadius, styles.justifyContentEvenly, styles.p3, styles.pt2, bgActiveStyles]}>
+            <View style={[styles.expenseWidgetRadius, styles.justifyContentEvenly, bgActiveStyles, style]}>
                 <View style={[styles.flexRow]}>
                     {shouldShowCheckbox && (
                         <Checkbox
@@ -460,7 +459,7 @@ function TransactionItemRow({
     }
 
     return (
-        <View style={[...safeColumnWrapperStyle, styles.flex1, styles.gap2, bgActiveStyles, styles.mw100]}>
+        <View style={[styles.expenseWidgetRadius, styles.flex1, styles.gap2, bgActiveStyles, styles.mw100, style]}>
             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
                 <Checkbox
                     disabled={isDisabled}

src/pages/UnreportedExpenseListItem.tsx

@@ -65,6 +65,7 @@ function UnreportedExpenseListItem<TItem extends ListItem>({item, isFocused, sho
                         setIsSelected((val) => !val);
                     }}
                     shouldShowCheckbox
+                    style={styles.p3}
                 />
             </PressableWithFeedback>
         </OfflineWithFeedback>