From e92ae2e902aba67787028f0ed8b9a05cc0ff65e2 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 5 May 2026 10:30:01 +0530 Subject: [PATCH 1/6] Reapply compact table and row styles for report transaction list Signed-off-by: krishna2323 Co-authored-by: Cursor --- .../MoneyRequestReportGroupHeader.tsx | 34 +++-- .../MoneyRequestReportTableHeader.tsx | 14 +- .../MoneyRequestReportTransactionItem.tsx | 16 ++- .../MoneyRequestReportTransactionList.tsx | 121 +++++++++--------- src/components/TransactionItemRow/index.tsx | 8 +- src/styles/variables.ts | 1 + 6 files changed, 111 insertions(+), 83 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx index 756b7f4330b0..d0cb8db184b3 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useMemo} from 'react'; +import React from 'react'; import {View} from 'react-native'; import Checkbox from '@components/Checkbox'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; @@ -6,6 +6,7 @@ import Text from '@components/Text'; import {useCurrencyListActions} from '@hooks/useCurrencyList'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {getCommaSeparatedTagNameWithSanitizedColons} from '@libs/PolicyUtils'; import variables from '@styles/variables'; @@ -13,8 +14,6 @@ import CONST from '@src/CONST'; import type {GroupedTransactions} from '@src/types/onyx'; import type {PendingAction} from '@src/types/onyx/OnyxCommon'; -const DESKTOP_HEIGHT = 28; - type MoneyRequestReportGroupHeaderProps = { /** The grouped transaction data */ group: GroupedTransactions; @@ -65,6 +64,7 @@ function MoneyRequestReportGroupHeader({ }: MoneyRequestReportGroupHeaderProps) { const {convertToDisplayString} = useCurrencyListActions(); const styles = useThemeStyles(); + const theme = useTheme(); const {translate} = useLocalize(); const {shouldUseNarrowLayout: shouldUseNarrowLayoutHook} = useResponsiveLayoutOnWideRHP(); const shouldUseNarrowLayout = shouldUseNarrowLayoutProp ?? shouldUseNarrowLayoutHook; @@ -75,18 +75,27 @@ function MoneyRequestReportGroupHeader({ const shouldShowCheckbox = isSelectionModeEnabled || !shouldUseNarrowLayout; - const textStyle = useMemo( - () => (shouldUseNarrowLayout ? {fontSize: variables.fontSizeLabel, lineHeight: 16} : {fontSize: variables.fontSizeNormal, lineHeight: DESKTOP_HEIGHT}), - [shouldUseNarrowLayout], - ); + const textStyle = shouldUseNarrowLayout ? {fontSize: variables.fontSizeLabel, lineHeight: 16} : [styles.labelStrong]; - const handleToggleSelection = useCallback(() => { + const handleToggleSelection = () => { onToggleSelection?.(groupKey); - }, [onToggleSelection, groupKey]); + }; + + const groupHeaderStyle = !shouldUseNarrowLayout + ? [ + {minHeight: variables.tableGroupRowHeight}, + styles.justifyContentCenter, + styles.highlightBG, + styles.pv2, + styles.ph3, + styles.borderBottom, + isSelected && {borderColor: theme.buttonHoveredBG}, + ] + : [styles.ph4, styles.pv3, styles.borderBottom]; return ( - + {shouldShowCheckbox && ( )} {displayName} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx index 53dc2cd5be3c..6c5c82aac0c1 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx @@ -16,8 +16,19 @@ type SearchTableHeaderProps = { taxAmountColumnSize: TableColumnSize; shouldShowSorting: boolean; columns: SearchColumnType[]; + shouldRemoveTotalColumnFlex?: boolean; }; -function MoneyRequestReportTableHeader({sortBy, sortOrder, onSortPress, dateColumnSize, shouldShowSorting, columns, amountColumnSize, taxAmountColumnSize}: SearchTableHeaderProps) { +function MoneyRequestReportTableHeader({ + sortBy, + sortOrder, + onSortPress, + dateColumnSize, + shouldShowSorting, + columns, + amountColumnSize, + taxAmountColumnSize, + shouldRemoveTotalColumnFlex, +}: SearchTableHeaderProps) { const styles = useThemeStyles(); const columnConfig = useMemo( @@ -77,6 +88,7 @@ function MoneyRequestReportTableHeader({sortBy, sortOrder, onSortPress, dateColu sortBy={sortBy} sortOrder={sortOrder} onSortPress={onSortPress} + shouldRemoveTotalColumnFlex={shouldRemoveTotalColumnFlex} /> ); diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 858ffba9006a..5c6fa5954ed6 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -10,6 +10,7 @@ import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP'; +import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useTransactionViolations from '@hooks/useTransactionViolations'; @@ -70,7 +71,7 @@ type MoneyRequestReportTransactionItemProps = { /** List of cards for the user */ nonPersonalAndWorkspaceCards: CardList; - /** Whether this is the last item in the list (used to skip border-bottom on narrow) */ + /** Whether this is the last item in the list */ isLastItem?: boolean; }; @@ -95,6 +96,7 @@ function MoneyRequestReportTransactionItem({ }: MoneyRequestReportTransactionItemProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); + const StyleUtils = useStyleUtils(); // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout(); const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP(); @@ -117,7 +119,7 @@ function MoneyRequestReportTransactionItem({ }, [scrollToNewTransaction, shouldBeHighlighted]); const animatedHighlightStyle = useAnimatedHighlightStyle({ - borderRadius: shouldUseNarrowLayout ? 0 : variables.componentBorderRadius, + borderRadius: shouldUseNarrowLayout ? variables.componentBorderRadius : 0, shouldHighlight: shouldBeHighlighted, highlightColor: theme.messageHighlightBG, backgroundColor: theme.highlightBG, @@ -125,7 +127,10 @@ function MoneyRequestReportTransactionItem({ }); return ( - + { @@ -136,7 +141,7 @@ function MoneyRequestReportTransactionItem({ role={getButtonRole(true)} isNested id={transaction.transactionID} - style={[styles.transactionListItemStyle, shouldUseNarrowLayout && styles.noBorderRadius]} + style={[styles.transactionListItemStyle, !shouldUseNarrowLayout ? StyleUtils.getSearchTableRowPressableStyle(isLastItem, isSelected) : styles.noBorderRadius]} hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} onPressIn={() => canUseTouchScreen() && ControlSelection.block()} @@ -164,13 +169,14 @@ function MoneyRequestReportTransactionItem({ onCheckboxPress={toggleTransaction} columns={columns} isDisabled={isPendingDelete} - style={shouldUseNarrowLayout ? [styles.p4, styles.noBorderRadius] : [styles.p3]} + style={!shouldUseNarrowLayout ? [styles.p3, styles.pv2, styles.noBorderRadius] : [styles.p4, styles.noBorderRadius]} onButtonPress={() => { handleOnPress(transaction.transactionID); }} onArrowRightPress={() => onArrowRightPress?.(transaction.transactionID)} isHover={hovered} nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards} + shouldRemoveTotalColumnFlex /> )} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 6827aa7a3d13..83d9a3688dc6 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -28,6 +28,7 @@ import useHandleSelectionMode from '@hooks/useHandleSelectionMode'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; +import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; import useReportIsArchived from '@hooks/useReportIsArchived'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -154,6 +155,7 @@ function MoneyRequestReportTransactionList({ const [isModalVisible, setIsModalVisible] = useState(false); const [selectedTransactionID, setSelectedTransactionID] = useState(''); const {reportPendingAction} = getReportOfflinePendingActionAndErrors(report); + const {isOffline} = useNetwork(); const isTaxEnabled = isPolicyTaxEnabled(policy); const {totalDisplaySpend, nonReimbursableSpend, reimbursableSpend} = getMoneyRequestSpendBreakdown(report); @@ -563,11 +565,36 @@ function MoneyRequestReportTransactionList({ [groupByOptions, reportLayoutGroupBy, styles, windowHeight, isInLandscapeMode], ); + const isDesktopTableLayout = !shouldUseNarrowLayout; + const lastTransactionID = useMemo(() => { const allTransactions = shouldShowGroupedTransactions ? groupedTransactions.flatMap((group) => group.transactions) : resolvedTransactions; - const nonDeletedTransactions = allTransactions.filter((t) => !isTransactionPendingDelete(t)); - return nonDeletedTransactions.at(-1)?.transactionID; - }, [shouldShowGroupedTransactions, groupedTransactions, resolvedTransactions]); + const visibleTransactions = allTransactions.filter((t) => isOffline || !isTransactionPendingDelete(t)); + return visibleTransactions.at(-1)?.transactionID; + }, [shouldShowGroupedTransactions, groupedTransactions, resolvedTransactions, isOffline]); + + const renderTransactionItem = (transaction: TransactionWithOptionalHighlight) => ( + + ); const transactionItems = shouldShowGroupedTransactions ? groupedTransactions.map((group) => { @@ -577,12 +604,8 @@ function MoneyRequestReportTransactionList({ isDisabled: false, pendingAction: undefined, }; - return ( - + - {group.transactions.map((transaction) => { - const isLastItem = transaction.transactionID === lastTransactionID; - return ( - - ); - })} + {group.transactions.map((transaction) => renderTransactionItem(transaction))} ); }) - : resolvedTransactions.map((transaction) => { - const isLastItem = transaction.transactionID === lastTransactionID; - return ( - - ); - }); + : resolvedTransactions.map((transaction) => renderTransactionItem(transaction)); const narrowListWrapper = shouldUseNarrowLayout ? [styles.highlightBG, styles.searchTableTopRadius, styles.searchTableBottomRadius, styles.overflowHidden] : undefined; const transactionListContent = ( {narrowListWrapper ? {transactionItems} : transactionItems} @@ -673,8 +648,27 @@ function MoneyRequestReportTransactionList({ const tableHeaderContent = ( - - + + { if (selectedTransactionIDs.length !== 0) { @@ -686,14 +680,17 @@ function MoneyRequestReportTransactionList({ accessibilityLabel={translate('accessibilityHints.selectAllTransactions')} isIndeterminate={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length !== transactionsWithoutPendingDelete.length} isChecked={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length === transactionsWithoutPendingDelete.length} + containerStyle={isDesktopTableLayout && styles.m0} + style={isDesktopTableLayout && styles.mr3} /> - {isMediumScreenWidth && !shouldScrollHorizontally && {translate('workspace.people.selectAll')}} + {isMediumScreenWidth && !shouldScrollHorizontally && {translate('workspace.people.selectAll')}} {(!isMediumScreenWidth || shouldScrollHorizontally) && ( = []; @@ -203,6 +204,7 @@ function TransactionItemRow({ isLargeScreenWidth: isLargeScreenWidthProp, policyForMovingExpenses, isActionColumnWide: isActionColumnWideProp, + shouldRemoveTotalColumnFlex, }: TransactionItemRowProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -548,7 +550,7 @@ function TransactionItemRow({ return ( {shouldShowAttendees && ( Date: Tue, 5 May 2026 10:50:47 +0530 Subject: [PATCH 2/6] Fix column misalignment by passing shouldRemoveTotalColumnFlex to TOTAL column style Signed-off-by: krishna2323 --- src/components/TransactionItemRow/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx index 47499a5a7c03..ffc9adfbb899 100644 --- a/src/components/TransactionItemRow/index.tsx +++ b/src/components/TransactionItemRow/index.tsx @@ -597,7 +597,7 @@ function TransactionItemRow({ return ( Date: Tue, 5 May 2026 11:04:11 +0530 Subject: [PATCH 3/6] Fix narrow layout on medium screens when horizontal scroll is active Signed-off-by: krishna2323 --- .../MoneyRequestReportTransactionItem.tsx | 6 +++++- .../MoneyRequestReportTransactionList.tsx | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 5c6fa5954ed6..271c57940fbc 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 83d9a3688dc6..ee3c2e66fd38 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} /> ); From dcad8975f1084ec9747a8452d7ab2b93f8438e90 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 5 May 2026 11:18:01 +0530 Subject: [PATCH 4/6] Reapply selected row border color for search and report table rows Signed-off-by: krishna2323 --- .../MoneyRequestReportTransactionItem.tsx | 2 +- .../MoneyRequestReportTransactionList.tsx | 3 ++- .../SearchList/ListItem/ExpenseReportListItem.tsx | 2 +- .../ListItem/TransactionGroupListExpanded.tsx | 4 +++- .../SearchList/ListItem/TransactionGroupListItem.tsx | 9 +++------ .../SearchList/ListItem/TransactionListItem.tsx | 11 ++++++++--- src/components/TransactionItemRow/index.tsx | 4 ++-- src/styles/utils/index.ts | 10 +++++++++- 8 files changed, 29 insertions(+), 16 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 271c57940fbc..04c00b51e9b6 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -155,7 +155,7 @@ function MoneyRequestReportTransactionItem({ }} disabled={isTransactionPendingDelete(transaction)} ref={viewRef} - wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && styles.borderBottom]} + wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(isSelected)]} > {({hovered}) => ( 0), ]} > ({ styles.mh0, isPendingDelete && styles.cursorDisabled, isLargeScreenWidth ? StyleUtils.getSearchTableRowPressableStyle(!!isLastItem, item.isSelected, {vertical: variables.tableRowPaddingVertical}) : styles.noBorderRadius, + !isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected), !isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], !isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], ], @@ -283,7 +284,6 @@ function ExpenseReportListItem({ isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], !isLargeScreenWidth && isFirstItem && styles.searchTableTopRadius, !isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius, - !isLargeScreenWidth && !isLastItem && styles.borderBottom, ]} accessible={false} shouldShowRightCaret={false} diff --git a/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx b/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx index 087288f8149b..90d0f6d8d7c3 100644 --- a/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx @@ -14,6 +14,7 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails' import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -92,6 +93,7 @@ function TransactionGroupListExpanded({ const shouldShowLoadingOnSearch = !!(!transactions?.length && transactionsSnapshotMetadata?.isLoading) || currentOffset > 0; const shouldDisplayLoadingIndicator = !isExpenseReportType && !!transactionsSnapshotMetadata?.isLoading && shouldShowLoadingOnSearch; const {isLargeScreenWidth} = useResponsiveLayout(); + const StyleUtils = useStyleUtils(); const isAmountColumnWide = transactions.some((transaction) => transaction.isAmountColumnWide); const isTaxAmountColumnWide = transactions.some((transaction) => transaction.isTaxAmountColumnWide); @@ -224,7 +226,7 @@ function TransactionGroupListExpanded({ isActionColumnWide={isActionColumnWide} /> - + )} {visibleTransactions.map((transaction, index) => { diff --git a/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx index 79fc9bd20ee5..64e29a3668d0 100644 --- a/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx @@ -217,6 +217,7 @@ function TransactionGroupListItem({ ...(isLastItem ? styles.searchTableBottomRadius : {}), }, isItemSelected && styles.activeComponentBG, + !isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(isItemSelected), ]; const pressableRef = useRef(null); @@ -543,11 +544,7 @@ function TransactionGroupListItem({ styles.userSelectNone, isLargeScreenWidth ? [StyleUtils.getSearchTableGroupRowBorderStyle(isFirstItem, isLastItem, isItemSelected), isLastItem && styles.overflowHidden] - : [ - !isFirstItem && styles.borderTop, - isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], - isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], - ], + : [isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden]], ]} > {({hovered}) => ( @@ -558,7 +555,7 @@ function TransactionGroupListItem({ onPress={onExpandIconPress} expandButtonStyle={isLargeScreenWidth ? styles.pv2 : styles.pv4Half} shouldShowToggleButton={isLargeScreenWidth} - borderBottomStyle={isLargeScreenWidth && styles.borderNone} + borderBottomStyle={isLargeScreenWidth ? styles.borderNone : isItemSelected && {borderColor: theme.buttonHoveredBG}} sentryLabel={CONST.SENTRY_LABEL.SEARCH.GROUP_EXPAND_TOGGLE} > ({ const theme = useTheme(); const StyleUtils = useStyleUtils(); - const {isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); + const {isLargeScreenWidth} = useResponsiveLayout(); const {currentSearchHash, currentSearchKey, currentSearchResults} = useSearchStateContext(); const snapshotReport = (currentSearchResults?.data?.[`${ONYXKEYS.COLLECTION.REPORT}${transactionItem.reportID}`] ?? {}) as Report; @@ -122,6 +122,7 @@ function TransactionListItem({ } : {...styles.flexColumn, ...styles.alignItemsStretch}, isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], + !isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected), !isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], !isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], ]; @@ -226,7 +227,6 @@ function TransactionListItem({ isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius, !isLargeScreenWidth && isFirstItem && styles.searchTableTopRadius, !isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius, - !isLargeScreenWidth && !isLastItem && styles.borderBottom, ]} > {({hovered}) => ( @@ -262,7 +262,12 @@ function TransactionListItem({ isActionColumnWide={transactionItem.isActionColumnWide} shouldShowCheckbox={!!canSelectMultiple} checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM_CHECKBOX} - style={[styles.p3, styles.pv2, shouldUseNarrowLayout ? [styles.p0, styles.pt3, styles.noBorderRadius] : isLargeScreenWidth && styles.noBorderRadius]} + style={[ + styles.p3, + styles.pv2, + !isLargeScreenWidth && [styles.p0, styles.pt3, isLastItem ? styles.searchTableBottomRadius : styles.noBorderRadius], + isLargeScreenWidth && (isLastItem ? styles.searchTableBottomRadius : styles.noBorderRadius), + ]} violations={transactionViolations} onArrowRightPress={isDeletedTransaction ? undefined : () => onSelectRow(item, transactionPreviewData)} isHover={hovered} diff --git a/src/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx index ffc9adfbb899..c63c12b6f78d 100644 --- a/src/components/TransactionItemRow/index.tsx +++ b/src/components/TransactionItemRow/index.tsx @@ -816,7 +816,7 @@ function TransactionItemRow({ {!!shouldShowBottomBorder && ( - + )} @@ -891,7 +891,7 @@ function TransactionItemRow({ {!!shouldShowBottomBorder && ( - + )} diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 71410b3531d9..c0415bb95f69 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1834,7 +1834,10 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ getSearchTableRowPressableStyle: (isLastItem?: boolean, isSelected?: boolean, padding?: {vertical?: number; horizontal?: number}): ViewStyle => ({ minHeight: variables.tableRowHeight, - borderRadius: 0, + borderTopLeftRadius: 0, + borderTopRightRadius: 0, + borderBottomLeftRadius: 0, + borderBottomRightRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: isSelected ? theme.buttonHoveredBG : theme.border, ...(isLastItem ? styles.searchTableBottomRadius : {}), @@ -1842,6 +1845,11 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ ...(padding?.horizontal !== undefined && {paddingHorizontal: padding.horizontal}), }), + getSelectedBorderBottomStyle: (isSelected?: boolean): ViewStyle => ({ + ...styles.borderBottom, + borderColor: isSelected ? theme.buttonHoveredBG : theme.border, + }), + getSearchTableHighlightBorderRadius: (isLargeScreenWidth: boolean): number => (isLargeScreenWidth ? 0 : variables.componentBorderRadius), getReportTableColumnStyles: (columnName: string, options: GetReportTableColumnStylesParams = {}): ViewStyle => { From ec8ffdcbefcf3a5bf2ee59516ae9cb830a7841c8 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 5 May 2026 11:25:51 +0530 Subject: [PATCH 5/6] Fix blank expense/row by moving border style from pressableStyle to wrapperStyle Signed-off-by: krishna2323 --- .../Search/SearchList/ListItem/ExpenseReportListItem.tsx | 2 +- .../SearchList/ListItem/TransactionGroupListItem.tsx | 7 +++++-- .../Search/SearchList/ListItem/TransactionListItem.tsx | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx b/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx index ba0027009ee5..ea824fa4edc6 100644 --- a/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx +++ b/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx @@ -180,7 +180,6 @@ function ExpenseReportListItem({ styles.mh0, isPendingDelete && styles.cursorDisabled, isLargeScreenWidth ? StyleUtils.getSearchTableRowPressableStyle(!!isLastItem, item.isSelected, {vertical: variables.tableRowPaddingVertical}) : styles.noBorderRadius, - !isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected), !isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], !isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], ], @@ -284,6 +283,7 @@ function ExpenseReportListItem({ isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], !isLargeScreenWidth && isFirstItem && styles.searchTableTopRadius, !isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius, + !isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected), ]} accessible={false} shouldShowRightCaret={false} diff --git a/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx index 64e29a3668d0..c24e122b4bcc 100644 --- a/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx @@ -217,7 +217,6 @@ function TransactionGroupListItem({ ...(isLastItem ? styles.searchTableBottomRadius : {}), }, isItemSelected && styles.activeComponentBG, - !isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(isItemSelected), ]; const pressableRef = useRef(null); @@ -544,7 +543,11 @@ function TransactionGroupListItem({ styles.userSelectNone, isLargeScreenWidth ? [StyleUtils.getSearchTableGroupRowBorderStyle(isFirstItem, isLastItem, isItemSelected), isLastItem && styles.overflowHidden] - : [isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden]], + : [ + isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], + isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], + !isLastItem && StyleUtils.getSelectedBorderBottomStyle(isItemSelected), + ], ]} > {({hovered}) => ( diff --git a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx index 2d26c7d7cb2b..ff5766b19db7 100644 --- a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx @@ -122,7 +122,6 @@ function TransactionListItem({ } : {...styles.flexColumn, ...styles.alignItemsStretch}, isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], - !isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected), !isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], !isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], ]; @@ -227,6 +226,7 @@ function TransactionListItem({ isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius, !isLargeScreenWidth && isFirstItem && styles.searchTableTopRadius, !isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius, + !isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected), ]} > {({hovered}) => ( From 51de5fc59de079d0cf51c3193504b2c223811318 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 5 May 2026 20:45:35 +0530 Subject: [PATCH 6/6] Fix selected row background mismatch between wrapper and pressable on narrow screens Signed-off-by: krishna2323 --- .../Search/SearchList/ListItem/ExpenseReportListItem.tsx | 2 +- .../Search/SearchList/ListItem/TransactionGroupListItem.tsx | 5 ++--- .../Search/SearchList/ListItem/TransactionListItem.tsx | 2 +- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx b/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx index ea824fa4edc6..0f19b332f105 100644 --- a/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx +++ b/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx @@ -199,7 +199,7 @@ function ExpenseReportListItem({ borderRadius: 0, shouldHighlight: item?.shouldAnimateInHighlight ?? false, highlightColor: theme.messageHighlightBG, - backgroundColor: theme.highlightBG, + backgroundColor: item.isSelected ? theme.activeComponentBG : theme.highlightBG, shouldApplyOtherStyles: !isLargeScreenWidth, }); diff --git a/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx index c24e122b4bcc..9d86c8b992c7 100644 --- a/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx @@ -198,16 +198,15 @@ function TransactionGroupListItem({ }; const StyleUtils = useStyleUtils(); + const isItemSelected = isSelectAllChecked || item?.isSelected; const animatedHighlightStyle = useAnimatedHighlightStyle({ shouldHighlight: item?.shouldAnimateInHighlight ?? false, highlightColor: theme.messageHighlightBG, - backgroundColor: theme.highlightBG, + backgroundColor: isItemSelected ? theme.activeComponentBG : theme.highlightBG, shouldApplyOtherStyles: false, }); - const isItemSelected = isSelectAllChecked || item?.isSelected; - const pressableStyle = [ styles.transactionGroupListItemStyle, isLargeScreenWidth && { diff --git a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx index ff5766b19db7..81e3e1c0c827 100644 --- a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx @@ -130,7 +130,7 @@ function TransactionListItem({ borderRadius: 0, shouldHighlight: item?.shouldAnimateInHighlight ?? false, highlightColor: theme.messageHighlightBG, - backgroundColor: theme.highlightBG, + backgroundColor: item.isSelected ? theme.activeComponentBG : theme.highlightBG, shouldApplyOtherStyles: !isLargeScreenWidth, });