From a5a1c243097f7f82a20a32c2886b365ce937a65d Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Tue, 10 Mar 2026 03:58:29 +0000 Subject: [PATCH 01/69] Adjust table row styles for desktop: reduce gaps, update padding - Reduce gap between table rows from 8px to 4px on desktop - Set row padding to 12px horizontal / 8px vertical on desktop - Reduce gap between table header and first row from 12px to 8px - Changes apply to search results, workspace editor, and expense rules - Mobile styles remain unchanged Co-authored-by: Shawn Borton --- src/components/SelectionList/ListItem/TableListItem.tsx | 5 ++++- .../Search/TransactionGroupListExpanded.tsx | 2 +- .../Search/TransactionGroupListItem.tsx | 2 +- .../SelectionListWithSections/Search/TransactionListItem.tsx | 2 +- src/styles/index.ts | 2 +- 5 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/SelectionList/ListItem/TableListItem.tsx b/src/components/SelectionList/ListItem/TableListItem.tsx index ec40a586e2738..d37926a726934 100644 --- a/src/components/SelectionList/ListItem/TableListItem.tsx +++ b/src/components/SelectionList/ListItem/TableListItem.tsx @@ -4,6 +4,7 @@ import Checkbox from '@components/Checkbox'; import ReportActionAvatars from '@components/ReportActionAvatars'; import TextWithTooltip from '@components/TextWithTooltip'; import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -31,6 +32,7 @@ function TableListItem({ const styles = useThemeStyles(); const theme = useTheme(); const StyleUtils = useStyleUtils(); + const {isLargeScreenWidth} = useResponsiveLayout(); const animatedHighlightStyle = useAnimatedHighlightStyle({ borderRadius: styles.selectionListPressableItemWrapper.borderRadius, @@ -56,6 +58,7 @@ function TableListItem({ pressableStyle={[ styles.selectionListPressableItemWrapper, styles.mh0, + isLargeScreenWidth && [styles.ph3, styles.pv2], // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle item.shouldAnimateInHighlight ? styles.bgTransparent : undefined, item.isSelected && styles.activeComponentBG, @@ -63,7 +66,7 @@ function TableListItem({ ]} pressableWrapperStyle={[styles.mh5, animatedHighlightStyle]} wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter]} - containerStyle={styles.mb2} + containerStyle={isLargeScreenWidth ? styles.mb1 : styles.mb2} isFocused={isFocused} isDisabled={isDisabled} showTooltip={showTooltip} diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx index 5fe3e3f736292..4302cbd0626a1 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx @@ -202,7 +202,7 @@ function TransactionGroupListExpanded({ onButtonPress={() => { openReportInRHP(transaction); }} - style={[styles.noBorderRadius, styles.p3, isLargeScreenWidth && [styles.pv1Half], styles.flex1]} + style={[styles.noBorderRadius, styles.p3, isLargeScreenWidth && styles.pv2, styles.flex1]} isReportItemChild isInSingleTransactionReport={isInSingleTransactionReport} shouldShowBottomBorder={shouldShowBottomBorder} diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index a487e000d2c9b..73e73f601e406 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -468,7 +468,7 @@ function TransactionGroupListItem({ isFocused && StyleUtils.getItemBackgroundColorStyle(!!isItemSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG), ]} onFocus={onFocus} - wrapperStyle={[styles.mb2, styles.mh5, animatedHighlightStyle, styles.userSelectNone]} + wrapperStyle={[isLargeScreenWidth ? styles.mb1 : styles.mb2, styles.mh5, animatedHighlightStyle, styles.userSelectNone]} > {({hovered}) => ( diff --git a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx index cb7fa5715fc34..60d131508dda0 100644 --- a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx @@ -192,7 +192,7 @@ function TransactionListItem({ isFocused && StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG), ]} onFocus={onFocus} - wrapperStyle={[styles.mb2, styles.mh5, styles.flex1, animatedHighlightStyle, styles.userSelectNone]} + wrapperStyle={[isLargeScreenWidth ? styles.mb1 : styles.mb2, styles.mh5, styles.flex1, animatedHighlightStyle, styles.userSelectNone]} > {({hovered}) => ( <> diff --git a/src/styles/index.ts b/src/styles/index.ts index f839bd0fa2511..bbd687fa5610c 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3494,7 +3494,7 @@ const staticStyles = (theme: ThemeColors) => flexDirection: 'row', alignItems: 'center', ...userSelect.userSelectNone, - paddingBottom: 12, + paddingBottom: 8, backgroundColor: theme.appBG, justifyContent: 'flex-start', }, From 4a3911ec4cb69a0385b9bb4640fe093b1849bff0 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Tue, 10 Mar 2026 11:50:48 +0000 Subject: [PATCH 02/69] Fix: Apply tighter row gaps and padding to ExpenseReportListItem (Reports > Reports page) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reduce vertical gap between rows from 8px to 4px (mb2 → mb1) and row padding from 12px to 8px vertical (pv3 → pv2) on desktop, matching the same changes already applied to TransactionListItem and TransactionGroupListItem. Co-authored-by: Shawn Borton --- .../Search/ExpenseReportListItem.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx index b3b44b0286e0b..445b51275ecad 100644 --- a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx +++ b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx @@ -158,14 +158,14 @@ function ExpenseReportListItem({ const listItemPressableStyle = useMemo( () => [ styles.selectionListPressableItemWrapper, - styles.pv3, + isLargeScreenWidth ? styles.pv2 : styles.pv3, styles.ph3, // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle styles.bgTransparent, item.isSelected && styles.activeComponentBG, styles.mh0, ], - [styles, item.isSelected], + [styles, item.isSelected, isLargeScreenWidth], ); const listItemWrapperStyle = useMemo( @@ -228,7 +228,7 @@ function ExpenseReportListItem({ item={item} pressableStyle={listItemPressableStyle} wrapperStyle={listItemWrapperStyle} - containerStyle={[styles.mb2]} + containerStyle={isLargeScreenWidth ? [styles.mb1] : [styles.mb2]} isFocused={isFocused} showTooltip={showTooltip} canSelectMultiple={canSelectMultiple} From 3b3321c73411a6656da9d9f5a77196cb28fb7fce Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Tue, 10 Mar 2026 11:55:26 +0000 Subject: [PATCH 03/69] Reduce table row min height from 64px to 52px on desktop Override minHeight with variables.optionRowHeightCompact (52px) on desktop for TableListItem, ExpenseReportListItem, TransactionListItem, and TransactionGroupListItem. Co-authored-by: Shawn Borton --- src/components/SelectionList/ListItem/TableListItem.tsx | 3 ++- .../SelectionListWithSections/Search/ExpenseReportListItem.tsx | 1 + .../Search/TransactionGroupListItem.tsx | 2 +- .../SelectionListWithSections/Search/TransactionListItem.tsx | 1 + 4 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionList/ListItem/TableListItem.tsx b/src/components/SelectionList/ListItem/TableListItem.tsx index d37926a726934..1f4575d96e4de 100644 --- a/src/components/SelectionList/ListItem/TableListItem.tsx +++ b/src/components/SelectionList/ListItem/TableListItem.tsx @@ -8,6 +8,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import variables from '@styles/variables'; import BaseListItem from './BaseListItem'; import type {ListItem, TableListItemProps} from './types'; @@ -58,7 +59,7 @@ function TableListItem({ pressableStyle={[ styles.selectionListPressableItemWrapper, styles.mh0, - isLargeScreenWidth && [styles.ph3, styles.pv2], + isLargeScreenWidth && [styles.ph3, styles.pv2, {minHeight: variables.optionRowHeightCompact}], // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle item.shouldAnimateInHighlight ? styles.bgTransparent : undefined, item.isSelected && styles.activeComponentBG, diff --git a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx index 445b51275ecad..a2c351ed8ac4e 100644 --- a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx +++ b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx @@ -160,6 +160,7 @@ function ExpenseReportListItem({ styles.selectionListPressableItemWrapper, isLargeScreenWidth ? styles.pv2 : styles.pv3, styles.ph3, + isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact}, // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle styles.bgTransparent, item.isSelected && styles.activeComponentBG, diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index 73e73f601e406..588036182fb95 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -182,7 +182,7 @@ function TransactionGroupListItem({ const isItemSelected = isSelectAllChecked || item?.isSelected; - const pressableStyle = [styles.transactionGroupListItemStyle, isItemSelected && styles.activeComponentBG]; + const pressableStyle = [styles.transactionGroupListItemStyle, isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact}, isItemSelected && styles.activeComponentBG]; const StyleUtils = useStyleUtils(); const pressableRef = useRef(null); diff --git a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx index 60d131508dda0..1a0da1e06ab76 100644 --- a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx @@ -99,6 +99,7 @@ function TransactionListItem({ const pressableStyle = [ styles.transactionListItemStyle, !isLargeScreenWidth && styles.pt3, + isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact}, item.isSelected && styles.activeComponentBG, isLargeScreenWidth ? {...styles.flexRow, ...styles.justifyContentBetween, ...styles.alignItemsCenter} : {...styles.flexColumn, ...styles.alignItemsStretch}, ]; From f255c91c5710f5e3f59415c073dfff13f934737b Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Tue, 10 Mar 2026 13:05:44 +0000 Subject: [PATCH 04/69] Apply desktop table row styling to TaskListItem MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Match the same desktop-only changes applied to other list item components: - Reduce vertical padding from 12px to 8px (pv3 → pv2) - Set minHeight to 52px (optionRowHeightCompact) - Reduce row gap from 8px to 4px (mb2 → mb1) Co-authored-by: Shawn Borton --- .../SelectionListWithSections/Search/TaskListItem.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/TaskListItem.tsx b/src/components/SelectionListWithSections/Search/TaskListItem.tsx index c91a193a91201..428eada80e6da 100644 --- a/src/components/SelectionListWithSections/Search/TaskListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TaskListItem.tsx @@ -31,8 +31,9 @@ function TaskListItem({ const listItemPressableStyle = [ styles.selectionListPressableItemWrapper, - styles.pv3, + isLargeScreenWidth ? styles.pv2 : styles.pv3, styles.ph3, + isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact}, // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle styles.bgTransparent, item.isSelected && styles.activeComponentBG, @@ -59,7 +60,7 @@ function TaskListItem({ item={item} pressableStyle={listItemPressableStyle} wrapperStyle={listItemWrapperStyle} - containerStyle={[styles.mb2]} + containerStyle={isLargeScreenWidth ? [styles.mb1] : [styles.mb2]} isFocused={isFocused} isDisabled={isDisabled} showTooltip={showTooltip} From 12b71c346189b8c46c27d31db4996e3def46db13 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Tue, 10 Mar 2026 15:20:58 +0000 Subject: [PATCH 05/69] Fix: Apply tighter row gaps and padding to expense report detail view MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reduce row gaps from 8px to 4px (gap2 → gap1) and vertical row padding from 12px to 8px (p3 + pv2) on desktop for the transaction table inside expanded expense reports (MoneyRequestReportTransactionList and MoneyRequestReportTransactionItem). Co-authored-by: Shawn Borton --- .../MoneyRequestReportTransactionItem.tsx | 4 ++-- .../MoneyRequestReportTransactionList.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index a789adcbf7c39..bc4919acb023c 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -88,7 +88,7 @@ function MoneyRequestReportTransactionItem({ const {translate} = useLocalize(); const styles = useThemeStyles(); // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth - const {isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout(); + const {isSmallScreenWidth, isMediumScreenWidth, isLargeScreenWidth} = useResponsiveLayout(); const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP(); const theme = useTheme(); const isPendingDelete = isTransactionPendingDelete(transaction); @@ -155,7 +155,7 @@ function MoneyRequestReportTransactionItem({ onCheckboxPress={toggleTransaction} columns={columns} isDisabled={isPendingDelete} - style={[styles.p3]} + style={[styles.p3, isLargeScreenWidth && styles.pv2]} onButtonPress={() => { handleOnPress(transaction.transactionID); }} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index b9f909d986451..a02d1b91377ed 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -168,7 +168,7 @@ function MoneyRequestReportTransactionList({ const expensifyIcons = useMemoizedLazyExpensifyIcons(['Location', 'CheckSquare', 'ReceiptPlus', 'Columns']); const {translate, localeCompare} = useLocalize(); // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth - const {isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout(); + const {isSmallScreenWidth, isMediumScreenWidth, isLargeScreenWidth} = useResponsiveLayout(); const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP(); const {markReportIDAsExpense} = useWideRHPActions(); const [isModalVisible, setIsModalVisible] = useState(false); @@ -527,7 +527,7 @@ function MoneyRequestReportTransactionList({ const transactionListContent = ( {shouldShowGroupedTransactions @@ -542,7 +542,7 @@ function MoneyRequestReportTransactionList({ return ( Date: Tue, 10 Mar 2026 18:19:11 +0000 Subject: [PATCH 06/69] Fix: Reduce expense report row min height to 52px, remove subgroup header top margin - Override minHeight from 64px to 52px (optionRowHeightCompact) on desktop for transaction rows inside expense reports (MoneyRequestReportTransactionItem) - Remove marginTop: 16 from reportLayoutGroupHeader style so subgroup headers (e.g., category group headers) have no top margin Co-authored-by: Shawn Borton --- .../MoneyRequestReportTransactionItem.tsx | 2 +- src/styles/index.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index bc4919acb023c..42652f78d3ce0 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -127,7 +127,7 @@ function MoneyRequestReportTransactionItem({ role={getButtonRole(true)} isNested id={transaction.transactionID} - style={[styles.transactionListItemStyle]} + style={[styles.transactionListItemStyle, isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact}]} hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} onPressIn={() => canUseTouchScreen() && ControlSelection.block()} diff --git a/src/styles/index.ts b/src/styles/index.ts index bbd687fa5610c..7846722198a7a 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -374,7 +374,6 @@ const staticStyles = (theme: ThemeColors) => reportLayoutGroupHeader: { paddingHorizontal: 12, - marginTop: 16, marginBottom: 8, backgroundColor: theme.appBG, justifyContent: 'center', From 53185f6a7a8081fe6684643b3ea760921d795c48 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Tue, 10 Mar 2026 19:55:50 +0000 Subject: [PATCH 07/69] Fix: Reduce table header bottom padding from 8px to 4px Co-authored-by: Shawn Borton --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 7846722198a7a..93bdf91d73fcf 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3493,7 +3493,7 @@ const staticStyles = (theme: ThemeColors) => flexDirection: 'row', alignItems: 'center', ...userSelect.userSelectNone, - paddingBottom: 8, + paddingBottom: 4, backgroundColor: theme.appBG, justifyContent: 'flex-start', }, From 689080f1b7e278c4d1baf797dc213417a413067d Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Tue, 10 Mar 2026 20:06:13 +0000 Subject: [PATCH 08/69] Remove 8px bottom margin from expense report transaction list container Co-authored-by: Shawn Borton --- .../MoneyRequestReportTransactionList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index a02d1b91377ed..4d088c001f708 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -527,7 +527,7 @@ function MoneyRequestReportTransactionList({ const transactionListContent = ( {shouldShowGroupedTransactions From ab5214428ffa32acb441b212c4b3fe270d825348 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Wed, 11 Mar 2026 01:05:32 +0000 Subject: [PATCH 09/69] Adjust subgroup header margins and remove checkbox padding in expense report view - Change reportLayoutGroupHeader margin from marginBottom: 8 to marginTop: 4, marginBottom: 4 for even spacing around subgroup headers - Remove pv2 (8px top/bottom padding) from the column header checkbox wrapper in MoneyRequestReportTransactionList Co-authored-by: Shawn Borton --- .../MoneyRequestReportTransactionList.tsx | 2 +- src/styles/index.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 4d088c001f708..4f2dea5381a35 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -607,7 +607,7 @@ function MoneyRequestReportTransactionList({ const tableHeaderContent = ( - + { if (selectedTransactionIDs.length !== 0) { diff --git a/src/styles/index.ts b/src/styles/index.ts index 93bdf91d73fcf..3f1768b8a401e 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -374,7 +374,8 @@ const staticStyles = (theme: ThemeColors) => reportLayoutGroupHeader: { paddingHorizontal: 12, - marginBottom: 8, + marginTop: 4, + marginBottom: 4, backgroundColor: theme.appBG, justifyContent: 'center', }, From c24bbafabd03e0a0ae91e54d46a886acb6c3cea8 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Wed, 11 Mar 2026 01:45:01 +0000 Subject: [PATCH 10/69] Remove vertical padding from search list table header Removes paddingVertical: 12 from listTableHeader style, which was adding 12px of vertical padding around the select-all checkbox and column headers above the search results table. Co-authored-by: Shawn Borton --- src/styles/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 3f1768b8a401e..9c4497749c501 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4747,7 +4747,6 @@ const staticStyles = (theme: ThemeColors) => }, listTableHeader: { - paddingVertical: 12, paddingHorizontal: 32, }, From 68efff28265031b382a73df1f19db086c18c5d42 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Wed, 11 Mar 2026 11:08:42 +0000 Subject: [PATCH 11/69] Fix: Reduce right arrow padding on expense rows from 14px to 8px vertical Change the right arrow PressableWithFeedback padding from p3Half (14px all sides) + pl0half/pr0half overrides to pv2 (8px vertical only), making expense rows less tall on the Reports > Expenses page. Co-authored-by: Shawn Borton --- 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 13a5de8f1debd..5d8f510cffabc 100644 --- a/src/components/TransactionItemRow/index.tsx +++ b/src/components/TransactionItemRow/index.tsx @@ -802,7 +802,7 @@ function TransactionItemRow({ onArrowRightPress?.()} - style={[styles.p3Half, styles.pl0half, styles.pr0half, styles.justifyContentCenter, styles.alignItemsEnd]} + style={[styles.pv2, styles.justifyContentCenter, styles.alignItemsEnd]} accessibilityRole={CONST.ROLE.BUTTON} accessibilityLabel={CONST.ROLE.BUTTON} sentryLabel={CONST.SENTRY_LABEL.TRANSACTION_ITEM_ROW.ARROW_RIGHT} From 77194d337132190d81dab6b950898d4c84371d21 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Wed, 11 Mar 2026 11:15:25 +0000 Subject: [PATCH 12/69] Adjust Workspaces page table row styles: tighter padding, gaps, and header alignment MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Row padding: 20px 12px 20px 20px → 12px 8px 12px 16px (pt3 pr2 pb3 pl4) - Row gaps: mb2 (8px) → mb1 (4px) - Table header: pr5/pl10 → ph9 (36px horizontal) for column alignment Co-authored-by: Shawn Borton --- src/pages/workspace/WorkspacesListPage.tsx | 4 ++-- src/pages/workspace/WorkspacesListRow.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx index 146081ffd12fa..4b428f2e4d73d 100755 --- a/src/pages/workspace/WorkspacesListPage.tsx +++ b/src/pages/workspace/WorkspacesListPage.tsx @@ -437,7 +437,7 @@ function WorkspacesListPage() { errorRowStyles={[styles.ph5, styles.mt3]} onClose={item.dismissError} errors={item.errors} - style={styles.mb2} + style={styles.mb1} shouldShowErrorMessages={item.policyID !== policyIDToDelete} shouldHideOnDelete={false} > @@ -623,7 +623,7 @@ function WorkspacesListPage() { /> )} {!isLessThanMediumScreen && filteredWorkspaces.length > 0 && ( - + - + Date: Wed, 11 Mar 2026 11:17:39 +0000 Subject: [PATCH 13/69] Fix: Prettier formatting in WorkspacesListRow.tsx Co-authored-by: Shawn Borton --- src/pages/workspace/WorkspacesListRow.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx index eb79a6426f783..8262cce877e6b 100644 --- a/src/pages/workspace/WorkspacesListRow.tsx +++ b/src/pages/workspace/WorkspacesListRow.tsx @@ -262,7 +262,9 @@ function WorkspacesListRow({ return ( - + Date: Wed, 11 Mar 2026 13:51:47 +0000 Subject: [PATCH 14/69] Fix: Apply tighter row gaps and padding to Domain rows on desktop MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reduce vertical gap between domain rows from 8px to 4px (mb2 → mb1) and row padding from 20px to 8px vertical / 12px horizontal (p5 → pv2/ph3) on desktop, matching the same compact styling applied to workspace and report list items. Co-authored-by: Shawn Borton --- src/components/Domain/DomainMenuItem.tsx | 4 +++- src/components/Domain/DomainsListRow.tsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/Domain/DomainMenuItem.tsx b/src/components/Domain/DomainMenuItem.tsx index b988f0b07d4f1..c8cf9cf608d59 100644 --- a/src/components/Domain/DomainMenuItem.tsx +++ b/src/components/Domain/DomainMenuItem.tsx @@ -6,6 +6,7 @@ import type {PopoverMenuItem} from '@components/PopoverMenu'; import {PressableWithoutFeedback} from '@components/Pressable'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import CONST from '@src/CONST'; @@ -53,6 +54,7 @@ type DomainItem = { function DomainMenuItem({item, index}: DomainMenuItemProps) { const icons = useMemoizedLazyExpensifyIcons(['Globe']); const styles = useThemeStyles(); + const {isLargeScreenWidth} = useResponsiveLayout(); const {translate} = useLocalize(); const {isAdmin, isValidated, action} = item; @@ -79,7 +81,7 @@ function DomainMenuItem({item, index}: DomainMenuItemProps) { clearDomainErrors(item.accountID)} diff --git a/src/components/Domain/DomainsListRow.tsx b/src/components/Domain/DomainsListRow.tsx index f3dd5068eb97a..cff2d05b17329 100644 --- a/src/components/Domain/DomainsListRow.tsx +++ b/src/components/Domain/DomainsListRow.tsx @@ -7,6 +7,7 @@ import type {PopoverMenuItem} from '@components/PopoverMenu'; import TextWithTooltip from '@components/TextWithTooltip'; import ThreeDotsMenu from '@components/ThreeDotsMenu'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; @@ -30,12 +31,13 @@ type DomainsListRowProps = { function DomainsListRow({title, isHovered, badgeText, brickRoadIndicator, menuItems}: DomainsListRowProps) { const styles = useThemeStyles(); + const {isLargeScreenWidth} = useResponsiveLayout(); const theme = useTheme(); const icons = useMemoizedLazyExpensifyIcons(['Globe', 'ArrowRight', 'DotIndicator']); return ( - + Date: Wed, 11 Mar 2026 13:54:23 +0000 Subject: [PATCH 15/69] Fix: run Prettier on DomainsListRow.tsx Co-authored-by: Shawn Borton --- src/components/Domain/DomainsListRow.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/Domain/DomainsListRow.tsx b/src/components/Domain/DomainsListRow.tsx index cff2d05b17329..1a29dd2b6b989 100644 --- a/src/components/Domain/DomainsListRow.tsx +++ b/src/components/Domain/DomainsListRow.tsx @@ -37,7 +37,17 @@ function DomainsListRow({title, isHovered, badgeText, brickRoadIndicator, menuIt const icons = useMemoizedLazyExpensifyIcons(['Globe', 'ArrowRight', 'DotIndicator']); return ( - + Date: Thu, 12 Mar 2026 02:28:25 +0000 Subject: [PATCH 16/69] Restyle desktop tables: no row gaps, border radius 0, bottom borders, highlight header bg - Remove row gaps (margin-bottom) between table rows on desktop - Set border radius to 0 on all table rows (desktop only) - Add 1px solid bottom border using theme.border color to each row - Update table headers to use highlightBG background color - Add 8px border radius wrapper to MoneyRequestReportTransactionList - All changes desktop-only; mobile styles unchanged Co-authored-by: Shawn Borton --- src/components/Domain/DomainMenuItem.tsx | 2 +- src/components/Domain/DomainsListRow.tsx | 4 ++-- .../MoneyRequestReportTransactionItem.tsx | 4 ++-- .../MoneyRequestReportTransactionList.tsx | 6 +++--- .../SelectionList/ListItem/TableListItem.tsx | 6 +++--- .../Search/ExpenseReportListItem.tsx | 6 +++--- .../SelectionListWithSections/Search/TaskListItem.tsx | 6 +++--- .../Search/TransactionGroupListExpanded.tsx | 2 +- .../Search/TransactionGroupListItem.tsx | 10 ++++++++-- .../Search/TransactionListItem.tsx | 11 +++++++++-- src/pages/workspace/WorkspacesListPage.tsx | 4 ++-- src/pages/workspace/WorkspacesListRow.tsx | 2 +- src/styles/index.ts | 2 +- 13 files changed, 39 insertions(+), 26 deletions(-) diff --git a/src/components/Domain/DomainMenuItem.tsx b/src/components/Domain/DomainMenuItem.tsx index c8cf9cf608d59..139f4463a6921 100644 --- a/src/components/Domain/DomainMenuItem.tsx +++ b/src/components/Domain/DomainMenuItem.tsx @@ -81,7 +81,7 @@ function DomainMenuItem({item, index}: DomainMenuItemProps) { clearDomainErrors(item.accountID)} diff --git a/src/components/Domain/DomainsListRow.tsx b/src/components/Domain/DomainsListRow.tsx index 1a29dd2b6b989..166675db39b96 100644 --- a/src/components/Domain/DomainsListRow.tsx +++ b/src/components/Domain/DomainsListRow.tsx @@ -41,8 +41,8 @@ function DomainsListRow({title, isHovered, badgeText, brickRoadIndicator, menuIt style={[ styles.flexRow, styles.highlightBG, - styles.br3, - isLargeScreenWidth ? [styles.pv2, styles.ph3] : [styles.p5, styles.pr3], + !isLargeScreenWidth && styles.br3, + isLargeScreenWidth ? [styles.pv2, styles.ph3, {borderRadius: 0, borderBottomWidth: 1, borderColor: theme.border}] : [styles.p5, styles.pr3], styles.alignItemsCenter, styles.gap3, isHovered && styles.hoveredComponentBG, diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 42652f78d3ce0..afb597a16e22f 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -127,7 +127,7 @@ function MoneyRequestReportTransactionItem({ role={getButtonRole(true)} isNested id={transaction.transactionID} - style={[styles.transactionListItemStyle, isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact}]} + style={[styles.transactionListItemStyle, isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0}]} hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} onPressIn={() => canUseTouchScreen() && ControlSelection.block()} @@ -137,7 +137,7 @@ function MoneyRequestReportTransactionItem({ }} disabled={isTransactionPendingDelete(transaction)} ref={viewRef} - wrapperStyle={[animatedHighlightStyle, styles.userSelectNone]} + wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: 1, borderColor: theme.border}]} > {({hovered}) => ( {shouldShowGroupedTransactions @@ -542,7 +542,7 @@ function MoneyRequestReportTransactionList({ return ( - + { diff --git a/src/components/SelectionList/ListItem/TableListItem.tsx b/src/components/SelectionList/ListItem/TableListItem.tsx index 1f4575d96e4de..a1640e8cb6fde 100644 --- a/src/components/SelectionList/ListItem/TableListItem.tsx +++ b/src/components/SelectionList/ListItem/TableListItem.tsx @@ -59,15 +59,15 @@ function TableListItem({ pressableStyle={[ styles.selectionListPressableItemWrapper, styles.mh0, - isLargeScreenWidth && [styles.ph3, styles.pv2, {minHeight: variables.optionRowHeightCompact}], + isLargeScreenWidth && [styles.ph3, styles.pv2, {minHeight: variables.optionRowHeightCompact, borderRadius: 0}], // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle item.shouldAnimateInHighlight ? styles.bgTransparent : undefined, item.isSelected && styles.activeComponentBG, item.cursorStyle, ]} - pressableWrapperStyle={[styles.mh5, animatedHighlightStyle]} + pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: 1, borderColor: theme.border}]} wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter]} - containerStyle={isLargeScreenWidth ? styles.mb1 : styles.mb2} + containerStyle={!isLargeScreenWidth ? styles.mb2 : undefined} isFocused={isFocused} isDisabled={isDisabled} showTooltip={showTooltip} diff --git a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx index a2c351ed8ac4e..ec8c4abbc3fde 100644 --- a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx +++ b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx @@ -160,7 +160,7 @@ function ExpenseReportListItem({ styles.selectionListPressableItemWrapper, isLargeScreenWidth ? styles.pv2 : styles.pv3, styles.ph3, - isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact}, + isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0}, // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle styles.bgTransparent, item.isSelected && styles.activeComponentBG, @@ -229,7 +229,7 @@ function ExpenseReportListItem({ item={item} pressableStyle={listItemPressableStyle} wrapperStyle={listItemWrapperStyle} - containerStyle={isLargeScreenWidth ? [styles.mb1] : [styles.mb2]} + containerStyle={!isLargeScreenWidth ? [styles.mb2] : undefined} isFocused={isFocused} showTooltip={showTooltip} canSelectMultiple={canSelectMultiple} @@ -240,7 +240,7 @@ function ExpenseReportListItem({ onLongPressRow={onLongPressRow} shouldSyncFocus={shouldSyncFocus} hoverStyle={item.isSelected && styles.activeComponentBG} - pressableWrapperStyle={[styles.mh5, animatedHighlightStyle]} + pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: 1, borderColor: theme.border}]} accessible={false} shouldShowRightCaret={false} shouldUseDefaultRightHandSideCheckmark={false} diff --git a/src/components/SelectionListWithSections/Search/TaskListItem.tsx b/src/components/SelectionListWithSections/Search/TaskListItem.tsx index 428eada80e6da..687694e65f08d 100644 --- a/src/components/SelectionListWithSections/Search/TaskListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TaskListItem.tsx @@ -33,7 +33,7 @@ function TaskListItem({ styles.selectionListPressableItemWrapper, isLargeScreenWidth ? styles.pv2 : styles.pv3, styles.ph3, - isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact}, + isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0}, // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle styles.bgTransparent, item.isSelected && styles.activeComponentBG, @@ -60,7 +60,7 @@ function TaskListItem({ item={item} pressableStyle={listItemPressableStyle} wrapperStyle={listItemWrapperStyle} - containerStyle={isLargeScreenWidth ? [styles.mb1] : [styles.mb2]} + containerStyle={!isLargeScreenWidth ? [styles.mb2] : undefined} isFocused={isFocused} isDisabled={isDisabled} showTooltip={showTooltip} @@ -72,7 +72,7 @@ function TaskListItem({ onLongPressRow={onLongPressRow} shouldSyncFocus={shouldSyncFocus} hoverStyle={item.isSelected && styles.activeComponentBG} - pressableWrapperStyle={[styles.mh5, animatedHighlightStyle]} + pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: 1, borderColor: theme.border}]} forwardedFSClass={fsClass} > ({ )} {visibleTransactions.map((transaction, index) => { - const shouldShowBottomBorder = !isLastTransaction(index) && !isLargeScreenWidth; + const shouldShowBottomBorder = !isLastTransaction(index); const exportedReportActions = Object.values(transactionsSnapshot?.data?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transaction?.reportID}`] ?? {}); const transactionRow = ( diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index 588036182fb95..8a9fcadaa7001 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -182,7 +182,7 @@ function TransactionGroupListItem({ const isItemSelected = isSelectAllChecked || item?.isSelected; - const pressableStyle = [styles.transactionGroupListItemStyle, isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact}, isItemSelected && styles.activeComponentBG]; + const pressableStyle = [styles.transactionGroupListItemStyle, isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0}, isItemSelected && styles.activeComponentBG]; const StyleUtils = useStyleUtils(); const pressableRef = useRef(null); @@ -468,7 +468,13 @@ function TransactionGroupListItem({ isFocused && StyleUtils.getItemBackgroundColorStyle(!!isItemSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG), ]} onFocus={onFocus} - wrapperStyle={[isLargeScreenWidth ? styles.mb1 : styles.mb2, styles.mh5, animatedHighlightStyle, styles.userSelectNone]} + wrapperStyle={[ + !isLargeScreenWidth && styles.mb2, + styles.mh5, + animatedHighlightStyle, + styles.userSelectNone, + isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: 1, borderColor: theme.border}, + ]} > {({hovered}) => ( diff --git a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx index 1a0da1e06ab76..640388127ac61 100644 --- a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx @@ -99,7 +99,7 @@ function TransactionListItem({ const pressableStyle = [ styles.transactionListItemStyle, !isLargeScreenWidth && styles.pt3, - isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact}, + isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0}, item.isSelected && styles.activeComponentBG, isLargeScreenWidth ? {...styles.flexRow, ...styles.justifyContentBetween, ...styles.alignItemsCenter} : {...styles.flexColumn, ...styles.alignItemsStretch}, ]; @@ -193,7 +193,14 @@ function TransactionListItem({ isFocused && StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG), ]} onFocus={onFocus} - wrapperStyle={[isLargeScreenWidth ? styles.mb1 : styles.mb2, styles.mh5, styles.flex1, animatedHighlightStyle, styles.userSelectNone]} + wrapperStyle={[ + !isLargeScreenWidth && styles.mb2, + styles.mh5, + styles.flex1, + animatedHighlightStyle, + styles.userSelectNone, + isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: 1, borderColor: theme.border}, + ]} > {({hovered}) => ( <> diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx index 4b428f2e4d73d..7e15558e3c13d 100755 --- a/src/pages/workspace/WorkspacesListPage.tsx +++ b/src/pages/workspace/WorkspacesListPage.tsx @@ -437,7 +437,7 @@ function WorkspacesListPage() { errorRowStyles={[styles.ph5, styles.mt3]} onClose={item.dismissError} errors={item.errors} - style={styles.mb1} + style={!isLessThanMediumScreen ? undefined : styles.mb1} shouldShowErrorMessages={item.policyID !== policyIDToDelete} shouldHideOnDelete={false} > @@ -623,7 +623,7 @@ function WorkspacesListPage() { /> )} {!isLessThanMediumScreen && filteredWorkspaces.length > 0 && ( - + + diff --git a/src/styles/index.ts b/src/styles/index.ts index 9c4497749c501..aac85bad11967 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3495,7 +3495,7 @@ const staticStyles = (theme: ThemeColors) => alignItems: 'center', ...userSelect.userSelectNone, paddingBottom: 4, - backgroundColor: theme.appBG, + backgroundColor: theme.highlightBG, justifyContent: 'flex-start', }, From bb64e133fddd655c9b4d6228aba671c13f437b72 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Thu, 12 Mar 2026 02:31:07 +0000 Subject: [PATCH 17/69] Fix: Prettier formatting in TransactionGroupListItem.tsx Co-authored-by: Shawn Borton --- .../Search/TransactionGroupListItem.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index 8a9fcadaa7001..79d1d19f2d07c 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -182,7 +182,11 @@ function TransactionGroupListItem({ const isItemSelected = isSelectAllChecked || item?.isSelected; - const pressableStyle = [styles.transactionGroupListItemStyle, isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0}, isItemSelected && styles.activeComponentBG]; + const pressableStyle = [ + styles.transactionGroupListItemStyle, + isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0}, + isItemSelected && styles.activeComponentBG, + ]; const StyleUtils = useStyleUtils(); const pressableRef = useRef(null); From b5bfa8492864a9202a2bceb90bd85d8e4a1876e8 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Thu, 12 Mar 2026 20:14:11 +0000 Subject: [PATCH 18/69] Fix: Constrain table header background to align with row backgrounds Remove width: 100% from searchListHeaderContainerStyle (views stretch by default in flex containers) and replace listTableHeader padding (paddingHorizontal: 32) with mh5 + ph3 (marginHorizontal: 20 + paddingHorizontal: 12). This keeps the same 32px content inset while constraining the header background to the inner portion that aligns with the data rows below. Co-authored-by: Shawn Borton --- src/components/Search/SearchList/index.tsx | 2 +- src/styles/index.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Search/SearchList/index.tsx b/src/components/Search/SearchList/index.tsx index a26fa3510a920..2b0e8155b25bd 100644 --- a/src/components/Search/SearchList/index.tsx +++ b/src/components/Search/SearchList/index.tsx @@ -489,7 +489,7 @@ function SearchList({ const content = ( {tableHeaderVisible && ( - + {canSelectMultiple && ( }, searchListHeaderContainerStyle: { - width: '100%', flexDirection: 'row', alignItems: 'center', ...userSelect.userSelectNone, From f543d5273da14f167933085c77ef3edcb1d86743 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Thu, 12 Mar 2026 20:30:05 +0000 Subject: [PATCH 19/69] Add table border-radius and last-row styling on desktop - Table headers: top-left/top-right border-radius of 8px and bottom border of 1px solid theme border color - Subgroup headers: no border-radius (override via groupSearchListTableContainerStyle) - Last row: no bottom border, bottom-left/bottom-right border-radius of 8px Adds isLastItem prop through the rendering chain (SearchList, BaseSelectionList, ListItemRenderer) to TransactionListItem, TransactionGroupListItem, ExpenseReportListItem, and TableListItem. Co-authored-by: Shawn Borton --- src/components/Search/SearchList/index.tsx | 2 ++ src/components/SelectionList/BaseSelectionList.tsx | 1 + .../SelectionList/ListItem/ListItemRenderer.tsx | 2 ++ src/components/SelectionList/ListItem/TableListItem.tsx | 8 +++++++- src/components/SelectionList/ListItem/types.ts | 3 +++ .../Search/ExpenseReportListItem.tsx | 8 +++++++- .../Search/TransactionGroupListItem.tsx | 4 +++- .../Search/TransactionListItem.tsx | 4 +++- src/components/SelectionListWithSections/types.ts | 3 +++ src/styles/index.ts | 7 +++++++ 10 files changed, 38 insertions(+), 4 deletions(-) diff --git a/src/components/Search/SearchList/index.tsx b/src/components/Search/SearchList/index.tsx index 2b0e8155b25bd..4e27ef7ad844b 100644 --- a/src/components/Search/SearchList/index.tsx +++ b/src/components/Search/SearchList/index.tsx @@ -410,6 +410,7 @@ function SearchList({ const itemData = itemsWithSelection.at(index); const itemWithSelection = itemData?.itemWithSelection ?? item; + const isLastItem = index === data.length - 1; return ( ({ index={index} isFocused={isItemFocused} isDisabled={isItemDisabled} + isLastItem={index === data.length - 1} canSelectMultiple={canSelectMultiple} onDismissError={onDismissError} onLongPressRow={onLongPressRow} diff --git a/src/components/SelectionList/ListItem/ListItemRenderer.tsx b/src/components/SelectionList/ListItem/ListItemRenderer.tsx index 7d4d38e0243ac..0824a3dffee16 100644 --- a/src/components/SelectionList/ListItem/ListItemRenderer.tsx +++ b/src/components/SelectionList/ListItem/ListItemRenderer.tsx @@ -51,6 +51,7 @@ function ListItemRenderer({ shouldDisableHoverStyle, shouldShowRightCaret, errorRowStyles, + isLastItem, }: ListItemRendererProps) { const handleOnCheckboxPress = () => { if (isTransactionGroupListItemType(item)) { @@ -106,6 +107,7 @@ function ListItemRenderer({ shouldHighlightSelectedItem={shouldHighlightSelectedItem} shouldDisableHoverStyle={shouldDisableHoverStyle} shouldShowRightCaret={shouldShowRightCaret} + isLastItem={isLastItem} /> {item.footerContent && item.footerContent} diff --git a/src/components/SelectionList/ListItem/TableListItem.tsx b/src/components/SelectionList/ListItem/TableListItem.tsx index a1640e8cb6fde..59fced8eaed72 100644 --- a/src/components/SelectionList/ListItem/TableListItem.tsx +++ b/src/components/SelectionList/ListItem/TableListItem.tsx @@ -29,6 +29,7 @@ function TableListItem({ shouldUseDefaultRightHandSideCheckmark, shouldShowRightCaret, errorRowStyles, + isLastItem, }: TableListItemProps) { const styles = useThemeStyles(); const theme = useTheme(); @@ -65,7 +66,12 @@ function TableListItem({ item.isSelected && styles.activeComponentBG, item.cursorStyle, ]} - pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: 1, borderColor: theme.border}]} + pressableWrapperStyle={[ + styles.mh5, + animatedHighlightStyle, + isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: theme.border}, + isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}, + ]} wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter]} containerStyle={!isLargeScreenWidth ? styles.mb2 : undefined} isFocused={isFocused} diff --git a/src/components/SelectionList/ListItem/types.ts b/src/components/SelectionList/ListItem/types.ts index 3f8c97c0c1016..cda2665a35b8d 100644 --- a/src/components/SelectionList/ListItem/types.ts +++ b/src/components/SelectionList/ListItem/types.ts @@ -208,6 +208,9 @@ type CommonListItemProps = { /** Whether product training tooltips can be displayed */ canShowProductTrainingTooltip?: boolean; + + /** Whether this is the last item in the list (used for bottom border-radius styling on desktop) */ + isLastItem?: boolean; } & TRightHandSideComponent & WithSentryLabel; diff --git a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx index ec8c4abbc3fde..b0f88341de9e2 100644 --- a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx +++ b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx @@ -47,6 +47,7 @@ function ExpenseReportListItem({ isDEWBetaEnabled, lastPaymentMethod, personalPolicyID, + isLastItem, }: ExpenseReportListItemProps) { const reportItem = item as unknown as ExpenseReportListItemType; const styles = useThemeStyles(); @@ -240,7 +241,12 @@ function ExpenseReportListItem({ onLongPressRow={onLongPressRow} shouldSyncFocus={shouldSyncFocus} hoverStyle={item.isSelected && styles.activeComponentBG} - pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: 1, borderColor: theme.border}]} + pressableWrapperStyle={[ + styles.mh5, + animatedHighlightStyle, + isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: theme.border}, + isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}, + ]} accessible={false} shouldShowRightCaret={false} shouldUseDefaultRightHandSideCheckmark={false} diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index 79d1d19f2d07c..002b6a73d4eda 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -79,6 +79,7 @@ function TransactionGroupListItem({ isDEWBetaEnabled, lastPaymentMethod, personalPolicyID, + isLastItem, }: TransactionGroupListItemProps) { const groupItem = item as unknown as TransactionGroupListItemType; @@ -477,7 +478,8 @@ function TransactionGroupListItem({ styles.mh5, animatedHighlightStyle, styles.userSelectNone, - isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: 1, borderColor: theme.border}, + isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: theme.border}, + isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}, ]} > {({hovered}) => ( diff --git a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx index 640388127ac61..5d80aa31b4823 100644 --- a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx @@ -52,6 +52,7 @@ function TransactionListItem({ isDEWBetaEnabled, lastPaymentMethod, personalPolicyID, + isLastItem, }: TransactionListItemProps) { const transactionItem = item as unknown as TransactionListItemType; const styles = useThemeStyles(); @@ -199,7 +200,8 @@ function TransactionListItem({ styles.flex1, animatedHighlightStyle, styles.userSelectNone, - isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: 1, borderColor: theme.border}, + isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: theme.border}, + isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}, ]} > {({hovered}) => ( diff --git a/src/components/SelectionListWithSections/types.ts b/src/components/SelectionListWithSections/types.ts index c240285c3ae6f..cd3fa543c41b8 100644 --- a/src/components/SelectionListWithSections/types.ts +++ b/src/components/SelectionListWithSections/types.ts @@ -125,6 +125,9 @@ type CommonListItemProps = { /** Accessibility role for the list item (e.g. 'checkbox' for multi-select options so screen readers announce checked state) */ accessibilityRole?: Role; + + /** Whether this is the last item in the list (used for bottom border-radius styling on desktop) */ + isLastItem?: boolean; } & TRightHandSideComponent; type ListItemFocusEventHandler = (event: NativeSyntheticEvent) => void; diff --git a/src/styles/index.ts b/src/styles/index.ts index 9972ee24b3e45..3b5c225fa8fda 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3496,11 +3496,18 @@ const staticStyles = (theme: ThemeColors) => paddingBottom: 4, backgroundColor: theme.highlightBG, justifyContent: 'flex-start', + borderTopLeftRadius: 8, + borderTopRightRadius: 8, + borderBottomWidth: 1, + borderColor: theme.border, }, groupSearchListTableContainerStyle: { minHeight: variables.h28, paddingBottom: 0, + borderTopLeftRadius: 0, + borderTopRightRadius: 0, + borderBottomWidth: 0, }, narrowSearchRouterInactiveStyle: { From d8ae824645e66eb44dddd8ba9a2439157b621b02 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Thu, 12 Mar 2026 20:34:54 +0000 Subject: [PATCH 20/69] Fix: Apply highlight background color to subgroup headers in expense reports Co-authored-by: Shawn Borton --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 3b5c225fa8fda..3ff7e4ed07891 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -376,7 +376,7 @@ const staticStyles = (theme: ThemeColors) => paddingHorizontal: 12, marginTop: 4, marginBottom: 4, - backgroundColor: theme.appBG, + backgroundColor: theme.highlightBG, justifyContent: 'center', }, From 790e587e7dfecae4b2505a97dabc9f9bed7ff2a8 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Fri, 13 Mar 2026 12:15:54 +0000 Subject: [PATCH 21/69] Fix: Set table header row padding to 8px top and 8px bottom Co-authored-by: Shawn Borton --- src/styles/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 3ff7e4ed07891..f19188c202dd9 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3493,7 +3493,8 @@ const staticStyles = (theme: ThemeColors) => flexDirection: 'row', alignItems: 'center', ...userSelect.userSelectNone, - paddingBottom: 4, + paddingTop: 8, + paddingBottom: 8, backgroundColor: theme.highlightBG, justifyContent: 'flex-start', borderTopLeftRadius: 8, From 0da068775cfc7c71e1966e13484e510d943183e7 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Fri, 13 Mar 2026 12:19:19 +0000 Subject: [PATCH 22/69] Fix: Adjust Workspaces page table header styling - Add 20px horizontal margin (mh5) - Set left padding to 16px, right padding to 8px - Set vertical padding to 8px - Add minimum height of 40px - Add 1px solid bottom border using theme border color Co-authored-by: Shawn Borton --- src/pages/workspace/WorkspacesListPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx index 7e15558e3c13d..750efe45c3c44 100755 --- a/src/pages/workspace/WorkspacesListPage.tsx +++ b/src/pages/workspace/WorkspacesListPage.tsx @@ -623,7 +623,7 @@ function WorkspacesListPage() { /> )} {!isLessThanMediumScreen && filteredWorkspaces.length > 0 && ( - + Date: Fri, 13 Mar 2026 12:22:03 +0000 Subject: [PATCH 23/69] Fix: run prettier on WorkspacesListPage.tsx Co-authored-by: Shawn Borton --- src/pages/workspace/WorkspacesListPage.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx index 750efe45c3c44..76365e6915475 100755 --- a/src/pages/workspace/WorkspacesListPage.tsx +++ b/src/pages/workspace/WorkspacesListPage.tsx @@ -623,7 +623,9 @@ function WorkspacesListPage() { /> )} {!isLessThanMediumScreen && filteredWorkspaces.length > 0 && ( - + Date: Fri, 13 Mar 2026 12:39:24 +0000 Subject: [PATCH 24/69] Update table headers for Workspace Editor and Workspaces list MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Workspace Editor table headers (Categories, Tags, Distance Rates, etc.): Add 20px horizontal margin, 16px/8px left/right padding, 8px vertical padding, 40px min height, 1px bottom border, and 8px top border-radius on desktop. Applies to both non-multi-select and multi-select modes. - Workspaces list page header: Add 8px top border-radius to match. - Last table row styling: Remove bottom border and add 8px bottom border-radius on last workspace row (wide layout). Workspace Editor tables already handle this via TableListItem's isLastItem prop. - Table component header (company cards): Update styling to match new workspace table header design. - ListHeader: Avoid width: 100% conflict with marginHorizontal when headerStyle is provided by using individual flex styles instead of peopleRow. All changes are desktop-only — mobile styles remain unchanged. Co-authored-by: Shawn Borton --- .../SelectionList/components/ListHeader.tsx | 11 +++++++++- .../CustomListHeader.tsx | 17 +++++++++++++- .../SelectionListWithModal/index.tsx | 22 +++++++++++++++++-- src/components/Table/TableHeader.tsx | 7 ++++-- src/pages/domain/BaseDomainMembersPage.tsx | 1 - src/pages/workspace/WorkspacesListPage.tsx | 3 ++- src/pages/workspace/WorkspacesListRow.tsx | 6 ++++- 7 files changed, 58 insertions(+), 9 deletions(-) diff --git a/src/components/SelectionList/components/ListHeader.tsx b/src/components/SelectionList/components/ListHeader.tsx index 976746329dd97..61b17ce129372 100644 --- a/src/components/SelectionList/components/ListHeader.tsx +++ b/src/components/SelectionList/components/ListHeader.tsx @@ -59,7 +59,16 @@ function ListHeader({ return ( diff --git a/src/components/SelectionListWithModal/CustomListHeader.tsx b/src/components/SelectionListWithModal/CustomListHeader.tsx index 3264ed3e82b5c..93c72b42ef442 100644 --- a/src/components/SelectionListWithModal/CustomListHeader.tsx +++ b/src/components/SelectionListWithModal/CustomListHeader.tsx @@ -1,7 +1,9 @@ import React from 'react'; import {View} from 'react-native'; import Text from '@components/Text'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; type CustomListHeaderProps = { @@ -23,6 +25,8 @@ function CustomListHeader({ }: CustomListHeaderProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + const theme = useTheme(); + const {isLargeScreenWidth} = useResponsiveLayout(); const header = ( {header}; + return ( + + {header} + + ); } export default CustomListHeader; diff --git a/src/components/SelectionListWithModal/index.tsx b/src/components/SelectionListWithModal/index.tsx index 27170e170a784..92ad5d51ca5c6 100644 --- a/src/components/SelectionListWithModal/index.tsx +++ b/src/components/SelectionListWithModal/index.tsx @@ -12,6 +12,7 @@ import useLocalize from '@hooks/useLocalize'; import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; import useNetwork from '@hooks/useNetwork'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {turnOnMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; import CONST from '@src/CONST'; @@ -39,10 +40,11 @@ function SelectionListWithModal({ const {translate} = useLocalize(); const {isOffline} = useNetwork(); const styles = useThemeStyles(); + const theme = useTheme(); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout here because there is a race condition that causes shouldUseNarrowLayout to change indefinitely in this component // See https://github.com/Expensify/App/issues/48675 for more details // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth - const {isSmallScreenWidth} = useResponsiveLayout(); + const {isSmallScreenWidth, isLargeScreenWidth} = useResponsiveLayout(); const isFocused = useIsFocused(); const icons = useMemoizedLazyExpensifyIcons(['CheckSquare'] as const); @@ -81,9 +83,25 @@ function SelectionListWithModal({ useHandleSelectionMode(selectedItems); + const desktopHeaderStyle = isLargeScreenWidth + ? { + marginHorizontal: 20, + paddingLeft: 16, + paddingRight: 8, + paddingTop: 8, + paddingBottom: 8, + minHeight: 40, + borderBottomWidth: 1, + borderColor: theme.border, + borderTopLeftRadius: 8, + borderTopRightRadius: 8, + backgroundColor: theme.highlightBG, + } + : undefined; + const style = { ...styleProp, - listHeaderWrapperStyle: [styles.baseListHeaderWrapperStyle, styleProp?.listHeaderWrapperStyle], + listHeaderWrapperStyle: [isLargeScreenWidth ? desktopHeaderStyle : styles.baseListHeaderWrapperStyle, styleProp?.listHeaderWrapperStyle], }; const handleLongPressRow = (item: TItem) => { diff --git a/src/components/Table/TableHeader.tsx b/src/components/Table/TableHeader.tsx index 093a9000ea642..84558ab028cb9 100644 --- a/src/components/Table/TableHeader.tsx +++ b/src/components/Table/TableHeader.tsx @@ -50,6 +50,7 @@ type TableHeaderProps = ViewProps & { */ function TableHeader({style, shouldHideHeaderWhenEmptySearch = true, ...props}: TableHeaderProps) { const styles = useThemeStyles(); + const theme = useTheme(); const {columns, isEmptyResult} = useTableContext(); if (shouldHideHeaderWhenEmptySearch && isEmptyResult) { @@ -59,9 +60,11 @@ function TableHeader({style, shouldHideHea return ( )} @@ -624,7 +625,7 @@ function WorkspacesListPage() { )} {!isLessThanMediumScreen && filteredWorkspaces.length > 0 && ( void; + + /** Whether this is the last item in the list */ + isLastItem?: boolean; }; type BrickRoadIndicatorIconProps = { @@ -131,6 +134,7 @@ function WorkspacesListRow({ isHovered, disabled, onPress, + isLastItem, }: WorkspacesListRowProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -261,7 +265,7 @@ function WorkspacesListRow({ ); return ( - + From c1580524feb754c7cb02b2a2a09335bdf4662b85 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Fri, 13 Mar 2026 12:57:24 +0000 Subject: [PATCH 25/69] Fix: Remove top margin from subgroup header (reportLayoutGroupHeader) Removed the remaining marginTop: 4 from reportLayoutGroupHeader style, fully eliminating the gap above subgroup headers as requested. Co-authored-by: Shawn Borton --- src/styles/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index f19188c202dd9..c332c95537124 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -374,7 +374,6 @@ const staticStyles = (theme: ThemeColors) => reportLayoutGroupHeader: { paddingHorizontal: 12, - marginTop: 4, marginBottom: 4, backgroundColor: theme.highlightBG, justifyContent: 'center', From 59b8837fc81eee1c4da2eb6ba95fff3ed08c520c Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Fri, 13 Mar 2026 14:55:50 +0000 Subject: [PATCH 26/69] Fix: Add minHeight 40px to searchListHeaderContainerStyle for table headers Co-authored-by: Shawn Borton --- src/styles/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/index.ts b/src/styles/index.ts index c332c95537124..d4b16421e8618 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3492,6 +3492,7 @@ const staticStyles = (theme: ThemeColors) => flexDirection: 'row', alignItems: 'center', ...userSelect.userSelectNone, + minHeight: 40, paddingTop: 8, paddingBottom: 8, backgroundColor: theme.highlightBG, From d32cf69aa8fa5e49d1ad227995838358d356e33e Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Fri, 13 Mar 2026 16:33:44 +0000 Subject: [PATCH 27/69] Update expense report table header and subheader group styles Table header: add 20px horizontal margin, 40px min height, 8px vertical padding, 12px horizontal padding, with border and rounded top corners matching other table headers. Subheader groups: 40px min height on desktop, remove bottom margin, add 1px bottom border using theme border color, 8px vertical padding. Co-authored-by: Shawn Borton --- .../MoneyRequestReportGroupHeader.tsx | 8 ++++++-- .../MoneyRequestReportTransactionList.tsx | 4 +++- src/styles/index.ts | 2 +- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx index 5d561637bcfe4..2250b1df55655 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx @@ -4,7 +4,9 @@ import Checkbox from '@components/Checkbox'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {convertToDisplayString} from '@libs/CurrencyUtils'; import {getCommaSeparatedTagNameWithSanitizedColons} from '@libs/PolicyUtils'; @@ -63,7 +65,9 @@ function MoneyRequestReportGroupHeader({ pendingAction, }: MoneyRequestReportGroupHeaderProps) { const styles = useThemeStyles(); + const theme = useTheme(); const {translate} = useLocalize(); + const {isLargeScreenWidth} = useResponsiveLayout(); const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP(); const cleanedGroupName = isGroupedByTag && group.groupName ? getCommaSeparatedTagNameWithSanitizedColons(group.groupName) : group.groupName; @@ -73,7 +77,7 @@ function MoneyRequestReportGroupHeader({ const shouldShowCheckbox = isSelectionModeEnabled || !shouldUseNarrowLayout; const conditionalHeight = useMemo( - () => (shouldUseNarrowLayout ? {height: shouldShowCheckbox ? MOBILE_HEIGHT_WITH_CHECKBOX : MOBILE_HEIGHT_WITHOUT_CHECKBOX} : {height: DESKTOP_HEIGHT, minHeight: DESKTOP_HEIGHT}), + () => (shouldUseNarrowLayout ? {height: shouldShowCheckbox ? MOBILE_HEIGHT_WITH_CHECKBOX : MOBILE_HEIGHT_WITHOUT_CHECKBOX} : {minHeight: 40}), [shouldUseNarrowLayout, shouldShowCheckbox], ); @@ -91,7 +95,7 @@ function MoneyRequestReportGroupHeader({ return ( - + {shouldShowCheckbox && ( - + { diff --git a/src/styles/index.ts b/src/styles/index.ts index d4b16421e8618..0d5ab8151209e 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -374,7 +374,7 @@ const staticStyles = (theme: ThemeColors) => reportLayoutGroupHeader: { paddingHorizontal: 12, - marginBottom: 4, + paddingVertical: 8, backgroundColor: theme.highlightBG, justifyContent: 'center', }, From 7e0d06068b829aaa949a4c7018932eb0251ca5a6 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Fri, 13 Mar 2026 17:23:24 +0000 Subject: [PATCH 28/69] Address review feedback: table row styling updates - Remove left horizontal padding from checkbox on expense report view - Add 8px bottom border radius to last expense row in expanded report - Ensure selected rows have no border radius except last row (8px bottom) - Vertically center text in Workspaces list table header - Use consistent 12px left padding for all workspace editor table headers Co-authored-by: Shawn Borton --- src/components/SelectionList/ListItem/TableListItem.tsx | 2 +- src/components/SelectionListWithModal/CustomListHeader.tsx | 5 ++--- .../Search/ExpenseReportListItem.tsx | 4 ++-- .../Search/TransactionGroupListExpanded.tsx | 2 +- .../Search/TransactionGroupListItem.tsx | 2 +- .../SelectionListWithSections/Search/TransactionListItem.tsx | 2 +- src/pages/workspace/WorkspaceMembersPage.tsx | 2 +- src/pages/workspace/WorkspacesListPage.tsx | 2 +- src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx | 2 +- 9 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/components/SelectionList/ListItem/TableListItem.tsx b/src/components/SelectionList/ListItem/TableListItem.tsx index 59fced8eaed72..69de0f32fdc75 100644 --- a/src/components/SelectionList/ListItem/TableListItem.tsx +++ b/src/components/SelectionList/ListItem/TableListItem.tsx @@ -60,7 +60,7 @@ function TableListItem({ pressableStyle={[ styles.selectionListPressableItemWrapper, styles.mh0, - isLargeScreenWidth && [styles.ph3, styles.pv2, {minHeight: variables.optionRowHeightCompact, borderRadius: 0}], + isLargeScreenWidth && [styles.ph3, styles.pv2, {minHeight: variables.optionRowHeightCompact, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}], // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle item.shouldAnimateInHighlight ? styles.bgTransparent : undefined, item.isSelected && styles.activeComponentBG, diff --git a/src/components/SelectionListWithModal/CustomListHeader.tsx b/src/components/SelectionListWithModal/CustomListHeader.tsx index 93c72b42ef442..0a94c0bdfe1bb 100644 --- a/src/components/SelectionListWithModal/CustomListHeader.tsx +++ b/src/components/SelectionListWithModal/CustomListHeader.tsx @@ -34,8 +34,7 @@ function CustomListHeader({ styles.flex1, styles.flexRow, styles.justifyContentBetween, - // Required padding accounting for the checkbox in multi-select mode - canSelectMultiple && styles.pl3, + styles.pl3, ]} > {leftHeaderText} @@ -53,7 +52,7 @@ function CustomListHeader({ style={[ styles.flexRow, isLargeScreenWidth - ? [styles.mh5, styles.pv2, styles.mnh40, styles.alignItemsCenter, {paddingLeft: 16, paddingRight: 8, borderBottomWidth: 1, borderColor: theme.border, borderTopLeftRadius: 8, borderTopRightRadius: 8, backgroundColor: theme.highlightBG}] + ? [styles.mh5, styles.pv2, styles.mnh40, styles.alignItemsCenter, {paddingLeft: 12, paddingRight: 8, borderBottomWidth: 1, borderColor: theme.border, borderTopLeftRadius: 8, borderTopRightRadius: 8, backgroundColor: theme.highlightBG}] : styles.baseListHeaderWrapperStyle, ]} > diff --git a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx index b0f88341de9e2..481f8f92a8c04 100644 --- a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx +++ b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx @@ -160,8 +160,8 @@ function ExpenseReportListItem({ () => [ styles.selectionListPressableItemWrapper, isLargeScreenWidth ? styles.pv2 : styles.pv3, - styles.ph3, - isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0}, + isLargeScreenWidth ? styles.pr3 : styles.ph3, + isLargeScreenWidth && {paddingLeft: 0, minHeight: variables.optionRowHeightCompact, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}, // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle styles.bgTransparent, item.isSelected && styles.activeComponentBG, diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx index 575bae65d21fb..af1a04f76953c 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx @@ -202,7 +202,7 @@ function TransactionGroupListExpanded({ onButtonPress={() => { openReportInRHP(transaction); }} - style={[styles.noBorderRadius, styles.p3, isLargeScreenWidth && styles.pv2, styles.flex1]} + style={[styles.noBorderRadius, styles.p3, isLargeScreenWidth && styles.pv2, styles.flex1, isLargeScreenWidth && isLastTransaction(index) && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}]} isReportItemChild isInSingleTransactionReport={isInSingleTransactionReport} shouldShowBottomBorder={shouldShowBottomBorder} diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index 002b6a73d4eda..3ca03817caaf0 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -185,7 +185,7 @@ function TransactionGroupListItem({ const pressableStyle = [ styles.transactionGroupListItemStyle, - isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0}, + isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}, isItemSelected && styles.activeComponentBG, ]; diff --git a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx index 5d80aa31b4823..d5d1c47f610c3 100644 --- a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx @@ -100,7 +100,7 @@ function TransactionListItem({ const pressableStyle = [ styles.transactionListItemStyle, !isLargeScreenWidth && styles.pt3, - isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0}, + isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}, item.isSelected && styles.activeComponentBG, isLargeScreenWidth ? {...styles.flexRow, ...styles.justifyContentBetween, ...styles.alignItemsCenter} : {...styles.flexColumn, ...styles.alignItemsStretch}, ]; diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index 7360c046ac450..139f3e75c51ab 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -573,7 +573,7 @@ function WorkspaceMembersPage({personalDetails, route, policy}: WorkspaceMembers // Show 4 columns only on wide screens for control policies if (isControlPolicyWithWideLayout) { const header = ( - + {translate('common.member')} diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx index c94bf7fbdeba2..600ebcafc491c 100755 --- a/src/pages/workspace/WorkspacesListPage.tsx +++ b/src/pages/workspace/WorkspacesListPage.tsx @@ -625,7 +625,7 @@ function WorkspacesListPage() { )} {!isLessThanMediumScreen && filteredWorkspaces.length > 0 && ( + {translate('common.destination')} From 13d201638173664b6c909a93c1fa03caecc6a55e Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Fri, 13 Mar 2026 17:26:53 +0000 Subject: [PATCH 29/69] Reduce collapsible group header vertical padding from 6px to 4px Change pv1Half (6px) to pv1 (4px) in all collapsible group header components used in the Reports "Group by" view. Co-authored-by: Shawn Borton --- .../SelectionListWithSections/Search/BaseListItemHeader.tsx | 2 +- .../SelectionListWithSections/Search/CardListItemHeader.tsx | 2 +- .../SelectionListWithSections/Search/MemberListItemHeader.tsx | 2 +- .../SelectionListWithSections/Search/ReportListItemHeader.tsx | 2 +- .../Search/WithdrawalIDListItemHeader.tsx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/BaseListItemHeader.tsx b/src/components/SelectionListWithSections/Search/BaseListItemHeader.tsx index dab3578dc7023..7867bbf852c63 100644 --- a/src/components/SelectionListWithSections/Search/BaseListItemHeader.tsx +++ b/src/components/SelectionListWithSections/Search/BaseListItemHeader.tsx @@ -139,7 +139,7 @@ function BaseListItemHeader({ return ( - + {!!canSelectMultiple && ( ({ return ( - + {!!canSelectMultiple && ( ({ return ( - + {!!canSelectMultiple && ( ({ }); }; return !isLargeScreenWidth ? ( - + ({ return ( - + {!!canSelectMultiple && ( Date: Sun, 15 Mar 2026 23:10:43 +0000 Subject: [PATCH 30/69] Fix: Reduce grouped table row vertical padding from 6px to 4px Change pv2 (8px) to pv1 (4px) on desktop for expanded transaction rows within report groups (TransactionGroupListExpanded). Co-authored-by: Shawn Borton --- .../Search/TransactionGroupListExpanded.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx index af1a04f76953c..afc74669a8692 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx @@ -202,7 +202,7 @@ function TransactionGroupListExpanded({ onButtonPress={() => { openReportInRHP(transaction); }} - style={[styles.noBorderRadius, styles.p3, isLargeScreenWidth && styles.pv2, styles.flex1, isLargeScreenWidth && isLastTransaction(index) && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}]} + style={[styles.noBorderRadius, styles.p3, isLargeScreenWidth && styles.pv1, styles.flex1, isLargeScreenWidth && isLastTransaction(index) && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}]} isReportItemChild isInSingleTransactionReport={isInSingleTransactionReport} shouldShowBottomBorder={shouldShowBottomBorder} From 0bc15baec3b73aae75b082280eaa076489808a2a Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Sun, 15 Mar 2026 23:50:13 +0000 Subject: [PATCH 31/69] Fix: Add left padding to report rows and adjust report header padding - ExpenseReportListItem: Use ph3 (12px horizontal) instead of pr3-only on desktop so left padding matches right padding - ReportListItemHeader HeaderFirstRow: Remove pl3 on desktop so checkbox has no horizontal padding, add paddingRight 44px to match the SearchTableHeader container alignment Co-authored-by: Shawn Borton --- .../Search/ExpenseReportListItem.tsx | 4 ++-- .../SelectionListWithSections/Search/ReportListItemHeader.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx index 481f8f92a8c04..087568c5d74cc 100644 --- a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx +++ b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx @@ -160,8 +160,8 @@ function ExpenseReportListItem({ () => [ styles.selectionListPressableItemWrapper, isLargeScreenWidth ? styles.pv2 : styles.pv3, - isLargeScreenWidth ? styles.pr3 : styles.ph3, - isLargeScreenWidth && {paddingLeft: 0, minHeight: variables.optionRowHeightCompact, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}, + styles.ph3, + isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}, // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle styles.bgTransparent, item.isSelected && styles.activeComponentBG, diff --git a/src/components/SelectionListWithSections/Search/ReportListItemHeader.tsx b/src/components/SelectionListWithSections/Search/ReportListItemHeader.tsx index 68f446452598c..c76b59ec2b31d 100644 --- a/src/components/SelectionListWithSections/Search/ReportListItemHeader.tsx +++ b/src/components/SelectionListWithSections/Search/ReportListItemHeader.tsx @@ -133,7 +133,7 @@ function HeaderFirstRow({ const currency = reportItem.currency ?? CONST.CURRENCY.USD; return ( - + {!!canSelectMultiple && ( Date: Mon, 16 Mar 2026 00:03:08 +0000 Subject: [PATCH 32/69] Fix ESLint errors and Prettier formatting - Add missing sentryLabel prop to PressableWithFeedback in TableHeader - Move getWorkspaceMenuItem after filteredWorkspaces definition to fix no-use-before-define - Add missing isLastItem dependency to useMemo in ExpenseReportListItem - Run Prettier on affected files Co-authored-by: Shawn Borton --- .../MoneyRequestReportTransactionList.tsx | 14 +- .../SelectionList/ListItem/TableListItem.tsx | 6 +- .../CustomListHeader.tsx | 16 +- .../Search/ExpenseReportListItem.tsx | 2 +- .../Search/TransactionGroupListExpanded.tsx | 8 +- src/components/Table/TableHeader.tsx | 1 + src/pages/workspace/WorkspacesListPage.tsx | 207 +++++++++--------- src/pages/workspace/WorkspacesListRow.tsx | 12 +- 8 files changed, 162 insertions(+), 104 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 44f5275fefc1c..1765f9ed06a52 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -609,7 +609,19 @@ function MoneyRequestReportTransactionList({ const tableHeaderContent = ( - + { diff --git a/src/components/SelectionList/ListItem/TableListItem.tsx b/src/components/SelectionList/ListItem/TableListItem.tsx index 69de0f32fdc75..29591525e91ca 100644 --- a/src/components/SelectionList/ListItem/TableListItem.tsx +++ b/src/components/SelectionList/ListItem/TableListItem.tsx @@ -60,7 +60,11 @@ function TableListItem({ pressableStyle={[ styles.selectionListPressableItemWrapper, styles.mh0, - isLargeScreenWidth && [styles.ph3, styles.pv2, {minHeight: variables.optionRowHeightCompact, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}], + isLargeScreenWidth && [ + styles.ph3, + styles.pv2, + {minHeight: variables.optionRowHeightCompact, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}, + ], // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle item.shouldAnimateInHighlight ? styles.bgTransparent : undefined, item.isSelected && styles.activeComponentBG, diff --git a/src/components/SelectionListWithModal/CustomListHeader.tsx b/src/components/SelectionListWithModal/CustomListHeader.tsx index 3305ebd35d31c..2077e18cd1294 100644 --- a/src/components/SelectionListWithModal/CustomListHeader.tsx +++ b/src/components/SelectionListWithModal/CustomListHeader.tsx @@ -63,7 +63,21 @@ function CustomListHeader({ style={[ styles.flexRow, isLargeScreenWidth - ? [styles.mh5, styles.pv2, styles.mnh40, styles.alignItemsCenter, {paddingLeft: 12, paddingRight: 8, borderBottomWidth: 1, borderColor: theme.border, borderTopLeftRadius: 8, borderTopRightRadius: 8, backgroundColor: theme.highlightBG}] + ? [ + styles.mh5, + styles.pv2, + styles.mnh40, + styles.alignItemsCenter, + { + paddingLeft: 12, + paddingRight: 8, + borderBottomWidth: 1, + borderColor: theme.border, + borderTopLeftRadius: 8, + borderTopRightRadius: 8, + backgroundColor: theme.highlightBG, + }, + ] : styles.baseListHeaderWrapperStyle, ]} > diff --git a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx index 087568c5d74cc..3c6c3d31ce6bf 100644 --- a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx +++ b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx @@ -167,7 +167,7 @@ function ExpenseReportListItem({ item.isSelected && styles.activeComponentBG, styles.mh0, ], - [styles, item.isSelected, isLargeScreenWidth], + [styles, item.isSelected, isLargeScreenWidth, isLastItem], ); const listItemWrapperStyle = useMemo( diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx index 58fae831b959b..8f8d7d77cfe55 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListExpanded.tsx @@ -208,7 +208,13 @@ function TransactionGroupListExpanded({ onButtonPress={() => { openReportInRHP(transaction); }} - style={[styles.noBorderRadius, styles.p3, isLargeScreenWidth && styles.pv1, styles.flex1, isLargeScreenWidth && isLastTransaction(index) && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}]} + style={[ + styles.noBorderRadius, + styles.p3, + isLargeScreenWidth && styles.pv1, + styles.flex1, + isLargeScreenWidth && isLastTransaction(index) && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}, + ]} isReportItemChild isInSingleTransactionReport={isInSingleTransactionReport} shouldShowBottomBorder={shouldShowBottomBorder} diff --git a/src/components/Table/TableHeader.tsx b/src/components/Table/TableHeader.tsx index 84558ab028cb9..cb5c0f313caba 100644 --- a/src/components/Table/TableHeader.tsx +++ b/src/components/Table/TableHeader.tsx @@ -130,6 +130,7 @@ function TableHeaderColumn({column}: {colu accessible accessibilityLabel={column.label} accessibilityRole="button" + sentryLabel={`TableHeader-${column.key}`} style={[styles.flexRow, styles.alignItemsCenter, column.styling?.flex ? {flex: column.styling.flex} : styles.flex1, column.styling?.containerStyles]} onPress={() => toggleSorting(column.key)} > diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx index 959bafdb0ba13..bfa0550205bb3 100755 --- a/src/pages/workspace/WorkspacesListPage.tsx +++ b/src/pages/workspace/WorkspacesListPage.tsx @@ -332,6 +332,103 @@ function WorkspacesListPage() { ); }; + const navigateToWorkspace = (policyID: string) => { + if (shouldUseNarrowLayout) { + Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(policyID)); + return; + } + Navigation.navigate(ROUTES.WORKSPACE_OVERVIEW.getRoute(policyID)); + }; + + const navigateToDomain = ({domainAccountID, isAdmin}: {domainAccountID: number; isAdmin: boolean}) => { + if (!isAdmin) { + return Navigation.navigate(ROUTES.WORKSPACES_DOMAIN_ACCESS_RESTRICTED.getRoute(domainAccountID)); + } + Navigation.navigate(ROUTES.DOMAIN_INITIAL.getRoute(domainAccountID)); + }; + + const {policiesWithCardFeedErrors} = usePoliciesWithCardFeedErrors(); + + /** + * Add free policies (workspaces) to the list of menu items and returns the list of menu items + */ + const workspaces: WorkspaceItem[] = []; + if (!isEmptyObject(policies)) { + const reimbursementAccountBrickRoadIndicator = !isEmptyObject(reimbursementAccount?.errors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined; + + for (const policy of Object.values(policies)) { + if (!policy || !shouldShowPolicy(policy, true, session?.email)) { + continue; + } + + const receiptUberBrickRoadIndicator = getUberConnectionErrorDirectlyFromPolicy(policy as OnyxEntry) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined; + + let brickRoadIndicator: ValueOf | undefined; + if (isPolicyAdmin(policy, session?.email)) { + const indicator = reimbursementAccountBrickRoadIndicator ?? receiptUberBrickRoadIndicator; + + if (indicator) { + brickRoadIndicator = indicator; + } else if (policiesWithCardFeedErrors.find((p) => p.id === policy.id)) { + brickRoadIndicator = CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR; + } else if (shouldShowEmployeeListError(policy)) { + brickRoadIndicator = CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR; + } else { + brickRoadIndicator = getPolicyBrickRoadIndicatorStatus( + policy, + isConnectionInProgress(allConnectionSyncProgresses?.[`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policy.id}`], policy), + ); + } + } + + if (policy?.isJoinRequestPending && policy?.policyDetailsForNonMembers) { + const policyInfo = Object.values(policy.policyDetailsForNonMembers).at(0) as PolicyDetailsForNonMembers; + const id = Object.keys(policy.policyDetailsForNonMembers).at(0); + workspaces.push({ + listItemType: 'workspace', + title: policyInfo.name, + icon: policyInfo?.avatar ? policyInfo.avatar : getDefaultWorkspaceAvatar(policy.name), + disabled: true, + ownerAccountID: policyInfo.ownerAccountID, + type: policyInfo.type, + iconType: policyInfo?.avatar ? CONST.ICON_TYPE_AVATAR : CONST.ICON_TYPE_ICON, + iconFill: theme.textLight, + fallbackIcon: icons.FallbackWorkspaceAvatar, + policyID: id, + role: CONST.POLICY.ROLE.USER, + errors: undefined, + action: () => null, + dismissError: () => null, + isJoinRequestPending: true, + }); + } else { + workspaces.push({ + listItemType: 'workspace', + title: policy.name, + icon: policy.avatarURL ? policy.avatarURL : getDefaultWorkspaceAvatar(policy.name), + action: () => navigateToWorkspace(policy.id), + brickRoadIndicator, + pendingAction: policy.pendingAction, + errors: policy.errors, + dismissError: () => dismissWorkspaceError(policy.id, policy.pendingAction), + disabled: policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE, + iconType: policy.avatarURL ? CONST.ICON_TYPE_AVATAR : CONST.ICON_TYPE_ICON, + iconFill: theme.textLight, + fallbackIcon: icons.FallbackWorkspaceAvatar, + policyID: policy.id, + ownerAccountID: policy.ownerAccountID, + role: policy.role, + type: policy.type, + employeeList: policy.employeeList, + }); + } + } + } + + const filterWorkspace = (workspace: WorkspaceItem, inputValue: string) => workspace.title.toLowerCase().includes(inputValue); + const sortWorkspace = (workspaceItems: WorkspaceItem[]) => workspaceItems.sort((a, b) => localeCompare(a.title, b.title)); + const [inputValue, setInputValue, filteredWorkspaces] = useSearchResults(workspaces, filterWorkspace, sortWorkspace); + /** * Gets the menu item for each workspace */ @@ -488,103 +585,6 @@ function WorkspacesListPage() { ); }; - const navigateToWorkspace = (policyID: string) => { - if (shouldUseNarrowLayout) { - Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(policyID)); - return; - } - Navigation.navigate(ROUTES.WORKSPACE_OVERVIEW.getRoute(policyID)); - }; - - const navigateToDomain = ({domainAccountID, isAdmin}: {domainAccountID: number; isAdmin: boolean}) => { - if (!isAdmin) { - return Navigation.navigate(ROUTES.WORKSPACES_DOMAIN_ACCESS_RESTRICTED.getRoute(domainAccountID)); - } - Navigation.navigate(ROUTES.DOMAIN_INITIAL.getRoute(domainAccountID)); - }; - - const {policiesWithCardFeedErrors} = usePoliciesWithCardFeedErrors(); - - /** - * Add free policies (workspaces) to the list of menu items and returns the list of menu items - */ - const workspaces: WorkspaceItem[] = []; - if (!isEmptyObject(policies)) { - const reimbursementAccountBrickRoadIndicator = !isEmptyObject(reimbursementAccount?.errors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined; - - for (const policy of Object.values(policies)) { - if (!policy || !shouldShowPolicy(policy, true, session?.email)) { - continue; - } - - const receiptUberBrickRoadIndicator = getUberConnectionErrorDirectlyFromPolicy(policy as OnyxEntry) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined; - - let brickRoadIndicator: ValueOf | undefined; - if (isPolicyAdmin(policy, session?.email)) { - const indicator = reimbursementAccountBrickRoadIndicator ?? receiptUberBrickRoadIndicator; - - if (indicator) { - brickRoadIndicator = indicator; - } else if (policiesWithCardFeedErrors.find((p) => p.id === policy.id)) { - brickRoadIndicator = CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR; - } else if (shouldShowEmployeeListError(policy)) { - brickRoadIndicator = CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR; - } else { - brickRoadIndicator = getPolicyBrickRoadIndicatorStatus( - policy, - isConnectionInProgress(allConnectionSyncProgresses?.[`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policy.id}`], policy), - ); - } - } - - if (policy?.isJoinRequestPending && policy?.policyDetailsForNonMembers) { - const policyInfo = Object.values(policy.policyDetailsForNonMembers).at(0) as PolicyDetailsForNonMembers; - const id = Object.keys(policy.policyDetailsForNonMembers).at(0); - workspaces.push({ - listItemType: 'workspace', - title: policyInfo.name, - icon: policyInfo?.avatar ? policyInfo.avatar : getDefaultWorkspaceAvatar(policy.name), - disabled: true, - ownerAccountID: policyInfo.ownerAccountID, - type: policyInfo.type, - iconType: policyInfo?.avatar ? CONST.ICON_TYPE_AVATAR : CONST.ICON_TYPE_ICON, - iconFill: theme.textLight, - fallbackIcon: icons.FallbackWorkspaceAvatar, - policyID: id, - role: CONST.POLICY.ROLE.USER, - errors: undefined, - action: () => null, - dismissError: () => null, - isJoinRequestPending: true, - }); - } else { - workspaces.push({ - listItemType: 'workspace', - title: policy.name, - icon: policy.avatarURL ? policy.avatarURL : getDefaultWorkspaceAvatar(policy.name), - action: () => navigateToWorkspace(policy.id), - brickRoadIndicator, - pendingAction: policy.pendingAction, - errors: policy.errors, - dismissError: () => dismissWorkspaceError(policy.id, policy.pendingAction), - disabled: policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE, - iconType: policy.avatarURL ? CONST.ICON_TYPE_AVATAR : CONST.ICON_TYPE_ICON, - iconFill: theme.textLight, - fallbackIcon: icons.FallbackWorkspaceAvatar, - policyID: policy.id, - ownerAccountID: policy.ownerAccountID, - role: policy.role, - type: policy.type, - employeeList: policy.employeeList, - }); - } - } - } - - const filterWorkspace = (workspace: WorkspaceItem, inputValue: string) => workspace.title.toLowerCase().includes(inputValue); - const sortWorkspace = (workspaceItems: WorkspaceItem[]) => workspaceItems.sort((a, b) => localeCompare(a.title, b.title)); - const [inputValue, setInputValue, filteredWorkspaces] = useSearchResults(workspaces, filterWorkspace, sortWorkspace); - const domains = allDomains ? Object.values(allDomains).reduce((domainItems, domain) => { if (!domain || !domain.accountID || !domain.email) { @@ -636,7 +636,18 @@ function WorkspacesListPage() { )} {!isLessThanMediumScreen && filteredWorkspaces.length > 0 && ( + From 4e403554c75713e2b3c6b356014ab9276cf5483d Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Mon, 16 Mar 2026 00:59:30 +0000 Subject: [PATCH 33/69] Fix: Restore 12px left padding on report rows in Reports > Reports page The HeaderFirstRow in ReportListItemHeader had its pl3 (12px left padding) conditionally removed on desktop. However, the parent TransactionGroupListItem has no padding on its pressable, so the left padding was lost entirely on the Reports > Reports page. Restoring pl3 unconditionally ensures 12px inner left padding on both mobile and desktop, matching the inner right padding. Co-authored-by: Shawn Borton --- .../SelectionListWithSections/Search/ReportListItemHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionListWithSections/Search/ReportListItemHeader.tsx b/src/components/SelectionListWithSections/Search/ReportListItemHeader.tsx index c76b59ec2b31d..8fe673253ca1f 100644 --- a/src/components/SelectionListWithSections/Search/ReportListItemHeader.tsx +++ b/src/components/SelectionListWithSections/Search/ReportListItemHeader.tsx @@ -133,7 +133,7 @@ function HeaderFirstRow({ const currency = reportItem.currency ?? CONST.CURRENCY.USD; return ( - + {!!canSelectMultiple && ( Date: Mon, 16 Mar 2026 12:22:48 +0000 Subject: [PATCH 34/69] Fix expense report table: last row border/radius and header padding - Remove bottom border and add bottom-left/right border radius on the last transaction row in the expense report view to match other tables - Update table header padding: 12px left, 44px right, remove extra horizontal padding from the checkbox wrapper Co-authored-by: Shawn Borton --- .../MoneyRequestReportTransactionItem.tsx | 8 ++++++-- .../MoneyRequestReportTransactionList.tsx | 18 +++++++++--------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index afb597a16e22f..2c46f94fa8b95 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -66,6 +66,9 @@ type MoneyRequestReportTransactionItemProps = { /** Whether this transaction should be highlighted as newly added */ shouldBeHighlighted: boolean; + + /** Whether this is the last item in the list (used for bottom border radius) */ + isLastItem?: boolean; }; function MoneyRequestReportTransactionItem({ @@ -84,6 +87,7 @@ function MoneyRequestReportTransactionItem({ scrollToNewTransaction, onArrowRightPress, shouldBeHighlighted, + isLastItem, }: MoneyRequestReportTransactionItemProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); @@ -127,7 +131,7 @@ function MoneyRequestReportTransactionItem({ role={getButtonRole(true)} isNested id={transaction.transactionID} - style={[styles.transactionListItemStyle, isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0}]} + style={[styles.transactionListItemStyle, isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}]} hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} onPressIn={() => canUseTouchScreen() && ControlSelection.block()} @@ -137,7 +141,7 @@ function MoneyRequestReportTransactionItem({ }} disabled={isTransactionPendingDelete(transaction)} ref={viewRef} - wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: 1, borderColor: theme.border}]} + wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: theme.border}, isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}]} > {({hovered}) => ( {shouldShowGroupedTransactions - ? groupedTransactions.map((group) => { + ? groupedTransactions.map((group, groupIndex) => { const selectionState = groupSelectionState.get(group.groupKey) ?? { isSelected: false, isIndeterminate: false, isDisabled: false, pendingAction: undefined, }; + const isLastGroup = groupIndex === groupedTransactions.length - 1; return ( - {group.transactions.map((transaction) => { + {group.transactions.map((transaction, transactionIndex) => { return ( ); })} ); }) - : sortedTransactions.map((transaction) => ( + : sortedTransactions.map((transaction, index) => ( ))} @@ -615,14 +615,14 @@ function MoneyRequestReportTransactionList({ styles.flexRow, styles.mh5, styles.pv2, - styles.ph3, + styles.pl3, styles.mnh40, styles.alignItemsCenter, styles.highlightBG, - {borderTopLeftRadius: 8, borderTopRightRadius: 8, borderBottomWidth: 1, borderColor: theme.border}, + {borderTopLeftRadius: 8, borderTopRightRadius: 8, borderBottomWidth: 1, borderColor: theme.border, paddingRight: 44}, ]} > - + { if (selectedTransactionIDs.length !== 0) { From 94c73374c3d67dddb3b44af7d91bf76daa4133f6 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Mon, 16 Mar 2026 12:25:38 +0000 Subject: [PATCH 35/69] Fix Prettier formatting in MoneyRequestReportTransactionItem Co-authored-by: Shawn Borton --- .../MoneyRequestReportTransactionItem.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 2c46f94fa8b95..82f8fe39a7dcc 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -131,7 +131,10 @@ function MoneyRequestReportTransactionItem({ role={getButtonRole(true)} isNested id={transaction.transactionID} - style={[styles.transactionListItemStyle, isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}]} + style={[ + styles.transactionListItemStyle, + isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}, + ]} hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} onPressIn={() => canUseTouchScreen() && ControlSelection.block()} @@ -141,7 +144,12 @@ function MoneyRequestReportTransactionItem({ }} disabled={isTransactionPendingDelete(transaction)} ref={viewRef} - wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: theme.border}, isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}]} + wrapperStyle={[ + animatedHighlightStyle, + styles.userSelectNone, + isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: theme.border}, + isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}, + ]} > {({hovered}) => ( Date: Mon, 16 Mar 2026 12:36:21 +0000 Subject: [PATCH 36/69] Remove checkbox margin-right and reduce action column width to 68px - Remove mr1 (4px margin-right) from checkboxes in table rows (TransactionItemRow, ExpenseReportListItemRow) and table headers (BaseListItemHeader, CardListItemHeader, MemberListItemHeader) - Reduce action column width from 80px to 68px everywhere: the column style in getReportTableColumnStyles, UserInfoAndActionButtonRow, and TaskListItemRow - Add w68 variable to styles/variables.ts Co-authored-by: Shawn Borton --- .../SelectionListWithSections/Search/BaseListItemHeader.tsx | 1 - .../SelectionListWithSections/Search/CardListItemHeader.tsx | 1 - .../Search/ExpenseReportListItemRow.tsx | 2 +- .../SelectionListWithSections/Search/MemberListItemHeader.tsx | 1 - .../SelectionListWithSections/Search/TaskListItemRow.tsx | 2 +- .../Search/UserInfoAndActionButtonRow.tsx | 2 +- src/components/TransactionItemRow/index.tsx | 1 - src/styles/utils/index.ts | 2 +- src/styles/variables.ts | 1 + 9 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/BaseListItemHeader.tsx b/src/components/SelectionListWithSections/Search/BaseListItemHeader.tsx index 7867bbf852c63..90d28d76f24a2 100644 --- a/src/components/SelectionListWithSections/Search/BaseListItemHeader.tsx +++ b/src/components/SelectionListWithSections/Search/BaseListItemHeader.tsx @@ -148,7 +148,6 @@ function BaseListItemHeader({ isIndeterminate={isIndeterminate} disabled={!!isDisabled || item.isDisabledCheckbox} accessibilityLabel={translate('common.select')} - style={isLargeScreenWidth && styles.mr1} sentryLabel={CONST.SENTRY_LABEL.SEARCH.GROUP_SELECT_ALL_CHECKBOX} /> )} diff --git a/src/components/SelectionListWithSections/Search/CardListItemHeader.tsx b/src/components/SelectionListWithSections/Search/CardListItemHeader.tsx index 19482ccc4b14c..d4773c257f340 100644 --- a/src/components/SelectionListWithSections/Search/CardListItemHeader.tsx +++ b/src/components/SelectionListWithSections/Search/CardListItemHeader.tsx @@ -130,7 +130,6 @@ function CardListItemHeader({ isIndeterminate={isIndeterminate} disabled={!!isDisabled || cardItem.isDisabledCheckbox} accessibilityLabel={translate('common.select')} - style={isLargeScreenWidth && styles.mr1} /> )} {!isLargeScreenWidth && ( diff --git a/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx b/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx index 36b1636294dc5..416a3bb202f5e 100644 --- a/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx +++ b/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx @@ -326,7 +326,7 @@ function ExpenseReportListItemRow({ disabled={isDisabledCheckbox} accessibilityLabel={item.text ?? ''} shouldStopMouseDownPropagation - style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), isDisabledCheckbox && styles.cursorDisabled, styles.mr1]} + style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), isDisabledCheckbox && styles.cursorDisabled]} sentryLabel={CONST.SENTRY_LABEL.SEARCH.EXPENSE_REPORT_CHECKBOX} /> )} diff --git a/src/components/SelectionListWithSections/Search/MemberListItemHeader.tsx b/src/components/SelectionListWithSections/Search/MemberListItemHeader.tsx index 122bba09dee00..38149e9d55cf8 100644 --- a/src/components/SelectionListWithSections/Search/MemberListItemHeader.tsx +++ b/src/components/SelectionListWithSections/Search/MemberListItemHeader.tsx @@ -113,7 +113,6 @@ function MemberListItemHeader({ isIndeterminate={isIndeterminate} disabled={!!isDisabled || memberItem.isDisabledCheckbox} accessibilityLabel={translate('common.select')} - style={isLargeScreenWidth && styles.mr1} /> )} {!isLargeScreenWidth && ( diff --git a/src/components/SelectionListWithSections/Search/TaskListItemRow.tsx b/src/components/SelectionListWithSections/Search/TaskListItemRow.tsx index a08605877b451..2c0ed0c5c3771 100644 --- a/src/components/SelectionListWithSections/Search/TaskListItemRow.tsx +++ b/src/components/SelectionListWithSections/Search/TaskListItemRow.tsx @@ -154,7 +154,7 @@ function TaskListItemRow({item, containerStyle, showTooltip}: TaskListItemRowPro - + )} - + diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 8b0cb4c11c404..e6bb007557d7c 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1867,7 +1867,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ columnWidth = {...getWidthStyle(variables.w92), ...styles.flex1}; break; case CONST.SEARCH.TABLE_COLUMNS.ACTION: - columnWidth = {...getWidthStyle(variables.w80), ...styles.alignItemsCenter}; + columnWidth = {...getWidthStyle(variables.w68), ...styles.alignItemsCenter}; break; case CONST.SEARCH.TABLE_COLUMNS.EXPORTED_TO: columnWidth = {...getWidthStyle(variables.w72), ...styles.alignItemsCenter}; diff --git a/src/styles/variables.ts b/src/styles/variables.ts index bb3e46c13c2d0..c95878979980b 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -362,6 +362,7 @@ export default { w44: 44, w46: 46, w52: 52, + w68: 68, w72: 72, w80: 80, w92: 92, From 40c549c18532517e3b14c03b8976cc64d70705da Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Mon, 16 Mar 2026 13:13:38 +0000 Subject: [PATCH 37/69] Fix: Remove border radius from selected expense rows, keep only for last item Add noBorderRadius to the TransactionItemRow style prop in both TransactionListItem and MoneyRequestReportTransactionItem on desktop. The inner TransactionItemRow applies expenseWidgetRadius (borderRadius: 8) which becomes visible when a row is selected (via bgActiveStyles). Override this with noBorderRadius for all rows, and add bottom-left/bottom-right border radius only for the last item. Co-authored-by: Shawn Borton --- .../MoneyRequestReportTransactionItem.tsx | 2 +- .../SelectionListWithSections/Search/TransactionListItem.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 82f8fe39a7dcc..376f303b6e06e 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -167,7 +167,7 @@ function MoneyRequestReportTransactionItem({ onCheckboxPress={toggleTransaction} columns={columns} isDisabled={isPendingDelete} - style={[styles.p3, isLargeScreenWidth && styles.pv2]} + style={[styles.p3, isLargeScreenWidth && styles.pv2, isLargeScreenWidth && styles.noBorderRadius, isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}]} onButtonPress={() => { handleOnPress(transaction.transactionID); }} diff --git a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx index d5d1c47f610c3..75e53829f6920 100644 --- a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx @@ -236,7 +236,7 @@ function TransactionListItem({ taxAmountColumnSize={taxAmountColumnSize} shouldShowCheckbox={!!canSelectMultiple} checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM_CHECKBOX} - style={[styles.p3, styles.pv2, shouldUseNarrowLayout ? styles.pt2 : {}]} + style={[styles.p3, isLargeScreenWidth && styles.noBorderRadius, styles.pv2, shouldUseNarrowLayout ? styles.pt2 : {}, isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}]} violations={transactionViolations} onArrowRightPress={() => onSelectRow(item, transactionPreviewData)} isHover={hovered} From 46087198d9186e300951084d1a078baca4564f5e Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Mon, 16 Mar 2026 13:16:46 +0000 Subject: [PATCH 38/69] Fix prettier formatting in MoneyRequestReportTransactionItem and TransactionListItem Co-authored-by: Shawn Borton --- .../MoneyRequestReportTransactionItem.tsx | 7 ++++++- .../Search/TransactionListItem.tsx | 8 +++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 376f303b6e06e..e056b5a1b33d9 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -167,7 +167,12 @@ function MoneyRequestReportTransactionItem({ onCheckboxPress={toggleTransaction} columns={columns} isDisabled={isPendingDelete} - style={[styles.p3, isLargeScreenWidth && styles.pv2, isLargeScreenWidth && styles.noBorderRadius, isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}]} + style={[ + styles.p3, + isLargeScreenWidth && styles.pv2, + isLargeScreenWidth && styles.noBorderRadius, + isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}, + ]} onButtonPress={() => { handleOnPress(transaction.transactionID); }} diff --git a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx index 75e53829f6920..44e258c7ff833 100644 --- a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx @@ -236,7 +236,13 @@ function TransactionListItem({ taxAmountColumnSize={taxAmountColumnSize} shouldShowCheckbox={!!canSelectMultiple} checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM_CHECKBOX} - style={[styles.p3, isLargeScreenWidth && styles.noBorderRadius, styles.pv2, shouldUseNarrowLayout ? styles.pt2 : {}, isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}]} + style={[ + styles.p3, + isLargeScreenWidth && styles.noBorderRadius, + styles.pv2, + shouldUseNarrowLayout ? styles.pt2 : {}, + isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}, + ]} violations={transactionViolations} onArrowRightPress={() => onSelectRow(item, transactionPreviewData)} isHover={hovered} From bf20e5fe90b6b50acb033ad3bd8e999ed9107f51 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Mon, 16 Mar 2026 14:06:28 +0000 Subject: [PATCH 39/69] Style Domains table as separate table and fix workspace editor header padding MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. Domains table on Workspaces page (desktop): - Restyle the Domains header to match other table headers (highlightBG, top border radius, bottom border) - Last domain row: no bottom border, bottom-left/right border radius - Pass isLastItem prop through DomainMenuItem to DomainsListRow 2. Workspace Editor table headers (Categories/Tags/etc): - SelectionListWithModal: paddingLeft 16px → 12px - Table/TableHeader: paddingLeft 16px → 12px Co-authored-by: Shawn Borton --- src/components/Domain/DomainMenuItem.tsx | 6 +++++- src/components/Domain/DomainsListRow.tsx | 14 +++++++++++-- .../SelectionListWithModal/index.tsx | 2 +- src/components/Table/TableHeader.tsx | 2 +- src/pages/workspace/WorkspacesListPage.tsx | 21 +++++++++++++++++++ 5 files changed, 40 insertions(+), 5 deletions(-) diff --git a/src/components/Domain/DomainMenuItem.tsx b/src/components/Domain/DomainMenuItem.tsx index 139f4463a6921..536c57aea03a3 100644 --- a/src/components/Domain/DomainMenuItem.tsx +++ b/src/components/Domain/DomainMenuItem.tsx @@ -22,6 +22,9 @@ type DomainMenuItemProps = { /** Row index in the menu */ index: number; + + /** Whether this is the last domain in the list */ + isLastItem?: boolean; }; type DomainItem = { @@ -51,7 +54,7 @@ type DomainItem = { } & Pick & WithSentryLabel; -function DomainMenuItem({item, index}: DomainMenuItemProps) { +function DomainMenuItem({item, index, isLastItem}: DomainMenuItemProps) { const icons = useMemoizedLazyExpensifyIcons(['Globe']); const styles = useThemeStyles(); const {isLargeScreenWidth} = useResponsiveLayout(); @@ -99,6 +102,7 @@ function DomainMenuItem({item, index}: DomainMenuItemProps) { isHovered={hovered} menuItems={threeDotsMenuItems} brickRoadIndicator={item.brickRoadIndicator} + isLastItem={isLastItem} /> )} diff --git a/src/components/Domain/DomainsListRow.tsx b/src/components/Domain/DomainsListRow.tsx index 166675db39b96..6fabf82e511b1 100644 --- a/src/components/Domain/DomainsListRow.tsx +++ b/src/components/Domain/DomainsListRow.tsx @@ -27,9 +27,12 @@ type DomainsListRowProps = { /** The type of brick road indicator to show */ brickRoadIndicator?: ValueOf; + + /** Whether this is the last domain row in the list */ + isLastItem?: boolean; }; -function DomainsListRow({title, isHovered, badgeText, brickRoadIndicator, menuItems}: DomainsListRowProps) { +function DomainsListRow({title, isHovered, badgeText, brickRoadIndicator, menuItems, isLastItem}: DomainsListRowProps) { const styles = useThemeStyles(); const {isLargeScreenWidth} = useResponsiveLayout(); const theme = useTheme(); @@ -42,7 +45,14 @@ function DomainsListRow({title, isHovered, badgeText, brickRoadIndicator, menuIt styles.flexRow, styles.highlightBG, !isLargeScreenWidth && styles.br3, - isLargeScreenWidth ? [styles.pv2, styles.ph3, {borderRadius: 0, borderBottomWidth: 1, borderColor: theme.border}] : [styles.p5, styles.pr3], + isLargeScreenWidth + ? [ + styles.pv2, + styles.ph3, + {borderRadius: 0, borderColor: theme.border}, + isLastItem ? {borderBottomWidth: 0, borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {borderBottomWidth: 1}, + ] + : [styles.p5, styles.pr3], styles.alignItemsCenter, styles.gap3, isHovered && styles.hoveredComponentBG, diff --git a/src/components/SelectionListWithModal/index.tsx b/src/components/SelectionListWithModal/index.tsx index 92ad5d51ca5c6..27dd52f8652fb 100644 --- a/src/components/SelectionListWithModal/index.tsx +++ b/src/components/SelectionListWithModal/index.tsx @@ -86,7 +86,7 @@ function SelectionListWithModal({ const desktopHeaderStyle = isLargeScreenWidth ? { marginHorizontal: 20, - paddingLeft: 16, + paddingLeft: 12, paddingRight: 8, paddingTop: 8, paddingBottom: 8, diff --git a/src/components/Table/TableHeader.tsx b/src/components/Table/TableHeader.tsx index cb5c0f313caba..6ca2815c309fc 100644 --- a/src/components/Table/TableHeader.tsx +++ b/src/components/Table/TableHeader.tsx @@ -64,7 +64,7 @@ function TableHeader({style, shouldHideHea styles.mh5, styles.pv2, styles.mnh40, - {paddingLeft: 16, paddingRight: 8, borderBottomWidth: 1, borderColor: theme.border, borderTopLeftRadius: 8, borderTopRightRadius: 8}, + {paddingLeft: 12, paddingRight: 8, borderBottomWidth: 1, borderColor: theme.border, borderTopLeftRadius: 8, borderTopRightRadius: 8}, // Flexbox fallback for browsers / native devices wider than 1024px which don't support grid styles.dFlex, styles.flexRow, diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx index bfa0550205bb3..84237c0bef195 100755 --- a/src/pages/workspace/WorkspacesListPage.tsx +++ b/src/pages/workspace/WorkspacesListPage.tsx @@ -708,14 +708,35 @@ function WorkspacesListPage() { return getWorkspaceMenuItem({item, index}); } case 'domain': { + const isLastDomain = domains.indexOf(item) === domains.length - 1; return ( ); } case 'domains-header': { + if (!isLessThanMediumScreen) { + return ( + + {translate('common.domains')} + + ); + } return ( {translate('common.domains')} From dc776dd74c33dfc44f99314a0df10878955f53f8 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Mon, 16 Mar 2026 16:13:49 +0000 Subject: [PATCH 40/69] Fix expense report table header padding and last row container styling - Replace asymmetric header padding (pl3 + paddingRight:44) with symmetric ph3 to match search list header pattern and align columns with row data - Add gap3 to header flexRow to match the row's gap3 spacing between checkbox and columns - Remove redundant borderRadius:8 and overflow:hidden from the transaction list container (individual rows handle their own border-radius styling) Co-authored-by: Shawn Borton --- .../MoneyRequestReportTransactionList.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 517b0a5433c98..48603bb7658c9 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -527,7 +527,7 @@ function MoneyRequestReportTransactionList({ const transactionListContent = ( {shouldShowGroupedTransactions @@ -615,11 +615,12 @@ function MoneyRequestReportTransactionList({ styles.flexRow, styles.mh5, styles.pv2, - styles.pl3, + styles.ph3, styles.mnh40, styles.alignItemsCenter, + styles.gap3, styles.highlightBG, - {borderTopLeftRadius: 8, borderTopRightRadius: 8, borderBottomWidth: 1, borderColor: theme.border, paddingRight: 44}, + {borderTopLeftRadius: 8, borderTopRightRadius: 8, borderBottomWidth: 1, borderColor: theme.border}, ]} > From df906f83cb4623c8d08934d66710f359b0a6fd2c Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Mon, 16 Mar 2026 16:54:53 +0000 Subject: [PATCH 41/69] Fix: Reduce grouping table row vertical padding from 6px to 4px Change paddingVertical in transactionGroupListItemStyle from 6 to 4 to match the tighter row spacing requested for desktop. Co-authored-by: Shawn Borton --- src/styles/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 2a2975f05adab..71cc27c7ad2ed 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4740,7 +4740,7 @@ const staticStyles = (theme: ThemeColors) => justifyContent: 'space-between', overflow: 'hidden', flexDirection: 'row', - paddingVertical: 6, + paddingVertical: 4, }, searchQueryListItemStyle: { From 1b01f970d69976a2f4c762a2583572a915eb850d Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Mon, 16 Mar 2026 17:01:39 +0000 Subject: [PATCH 42/69] Reduce grouping row expand/collapse arrow vertical padding from 18px to 12px Co-authored-by: Shawn Borton --- .../Search/TransactionGroupListItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index 3ca03817caaf0..174efaab006dd 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -488,7 +488,7 @@ function TransactionGroupListItem({ isExpanded={isExpanded} header={getHeader(hovered)} onPress={onExpandIconPress} - expandButtonStyle={styles.pv4Half} + expandButtonStyle={styles.pv3} shouldShowToggleButton={isLargeScreenWidth} sentryLabel={CONST.SENTRY_LABEL.SEARCH.GROUP_EXPAND_TOGGLE} > From ce8864ccba1c7cc13002432c578d1e891542d8c7 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Mon, 16 Mar 2026 17:41:50 +0000 Subject: [PATCH 43/69] Fix: Reduce group collapse arrow vertical padding from 18px to 8px The AnimatedCollapsible toggle button used the shorthand p3Half (padding: 14) as a base, which prevented paddingVertical overrides from taking effect. Replaced the shorthand with explicit paddingHorizontal/paddingVertical so the expandButtonStyle prop properly overrides vertical padding. Changed the override from pv3 (12px) to pv2 (8px) to match the tighter row styling. Co-authored-by: Shawn Borton --- src/components/AnimatedCollapsible/index.tsx | 2 +- .../Search/TransactionGroupListItem.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AnimatedCollapsible/index.tsx b/src/components/AnimatedCollapsible/index.tsx index 4e5a4f9cb03de..d9ee8feb5647f 100644 --- a/src/components/AnimatedCollapsible/index.tsx +++ b/src/components/AnimatedCollapsible/index.tsx @@ -139,7 +139,7 @@ function AnimatedCollapsible({ ({ isExpanded={isExpanded} header={getHeader(hovered)} onPress={onExpandIconPress} - expandButtonStyle={styles.pv3} + expandButtonStyle={styles.pv2} shouldShowToggleButton={isLargeScreenWidth} sentryLabel={CONST.SENTRY_LABEL.SEARCH.GROUP_EXPAND_TOGGLE} > From 0612fd15890176977b963722621fd41fc53eef59 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Tue, 17 Mar 2026 10:05:33 +0000 Subject: [PATCH 44/69] Clamp table cell text to 1 line instead of 2 Change numberOfLines from 2 to 1 across all search table cells (TextCell, TaskListItemRow, CardListItemHeader) and switch from preWrap to pre style to prevent line wrapping. Tooltip on hover behavior is preserved. Co-authored-by: Shawn Borton --- .../Search/CardListItemHeader.tsx | 12 ++++++------ .../Search/TaskListItemRow.tsx | 8 ++++---- .../SelectionListWithSections/Search/TextCell.tsx | 4 ++-- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/CardListItemHeader.tsx b/src/components/SelectionListWithSections/Search/CardListItemHeader.tsx index d4773c257f340..cad4038da0904 100644 --- a/src/components/SelectionListWithSections/Search/CardListItemHeader.tsx +++ b/src/components/SelectionListWithSections/Search/CardListItemHeader.tsx @@ -80,8 +80,8 @@ function CardListItemHeader({ @@ -93,8 +93,8 @@ function CardListItemHeader({ > ), @@ -147,8 +147,8 @@ function CardListItemHeader({ /> diff --git a/src/components/SelectionListWithSections/Search/TaskListItemRow.tsx b/src/components/SelectionListWithSections/Search/TaskListItemRow.tsx index 2c0ed0c5c3771..6ff2125ccd79c 100644 --- a/src/components/SelectionListWithSections/Search/TaskListItemRow.tsx +++ b/src/components/SelectionListWithSections/Search/TaskListItemRow.tsx @@ -50,8 +50,8 @@ function TitleCell({taskItem, showTooltip, isLargeScreenWidth}: TaskCellProps) { ); } @@ -63,8 +63,8 @@ function DescriptionCell({taskItem, showTooltip, isLargeScreenWidth}: TaskCellPr ); } diff --git a/src/components/SelectionListWithSections/Search/TextCell.tsx b/src/components/SelectionListWithSections/Search/TextCell.tsx index a0eca53db729c..abdd1fda1afd9 100644 --- a/src/components/SelectionListWithSections/Search/TextCell.tsx +++ b/src/components/SelectionListWithSections/Search/TextCell.tsx @@ -14,8 +14,8 @@ function TextCell({text = '', isLargeScreenWidth = true}: TextCellProps) { ); } From 5ccb99972757202d3f02cc6a8d651c146ce65f9f Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Tue, 17 Mar 2026 11:11:19 +0000 Subject: [PATCH 45/69] Apply 1-line truncation to TagCell, CategoryCell, and MerchantCell Change numberOfLines from 2 to 1 and preWrap to pre for consistent single-line text truncation across all table data cells, matching the same treatment already applied to TextCell, TaskListItemRow, and CardListItemHeader. Co-authored-by: Shawn Borton --- src/components/TransactionItemRow/DataCells/CategoryCell.tsx | 4 ++-- src/components/TransactionItemRow/DataCells/MerchantCell.tsx | 4 ++-- src/components/TransactionItemRow/DataCells/TagCell.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/TransactionItemRow/DataCells/CategoryCell.tsx b/src/components/TransactionItemRow/DataCells/CategoryCell.tsx index 1eed41e4076b3..7263829d1016c 100644 --- a/src/components/TransactionItemRow/DataCells/CategoryCell.tsx +++ b/src/components/TransactionItemRow/DataCells/CategoryCell.tsx @@ -23,8 +23,8 @@ function CategoryCell({shouldUseNarrowLayout, shouldShowTooltip, transactionItem ); } diff --git a/src/components/TransactionItemRow/DataCells/MerchantCell.tsx b/src/components/TransactionItemRow/DataCells/MerchantCell.tsx index 7aec8d8fdfda4..00f59eaf95c10 100644 --- a/src/components/TransactionItemRow/DataCells/MerchantCell.tsx +++ b/src/components/TransactionItemRow/DataCells/MerchantCell.tsx @@ -27,8 +27,8 @@ function MerchantOrDescriptionCell({ ); } diff --git a/src/components/TransactionItemRow/DataCells/TagCell.tsx b/src/components/TransactionItemRow/DataCells/TagCell.tsx index 00a741f52a141..e4d9c8cb7f90f 100644 --- a/src/components/TransactionItemRow/DataCells/TagCell.tsx +++ b/src/components/TransactionItemRow/DataCells/TagCell.tsx @@ -20,8 +20,8 @@ function TagCell({shouldUseNarrowLayout, shouldShowTooltip, transactionItem}: Tr ); } From d6814510b76d3c5746932dc440dd037d46ed38b9 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Tue, 17 Mar 2026 13:42:05 +0000 Subject: [PATCH 46/69] Use compact 28x28 avatars in search table rows MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - SearchReportAvatar: AVATAR_SIZE.DEFAULT (40px) → AVATAR_SIZE.SMALL (28px) - CardListItem: owner avatar container and size → AVATAR_SIZE.SMALL (28px) - Avatar column width: w40 (40px) → w28 (28px) to match Co-authored-by: Shawn Borton --- src/components/ReportActionAvatars/SearchReportAvatar.tsx | 6 +++--- .../SelectionListWithSections/Search/CardListItem.tsx | 3 ++- src/styles/utils/index.ts | 2 +- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/ReportActionAvatars/SearchReportAvatar.tsx b/src/components/ReportActionAvatars/SearchReportAvatar.tsx index 89a89d8394aab..51ea2c2403b05 100644 --- a/src/components/ReportActionAvatars/SearchReportAvatar.tsx +++ b/src/components/ReportActionAvatars/SearchReportAvatar.tsx @@ -24,7 +24,7 @@ function SearchReportAvatar({primaryAvatar, secondaryAvatar, avatarType, shouldS ({ > ({ columnWidth = {...getWidthStyle(variables.w36), ...styles.alignItemsCenter}; break; case CONST.SEARCH.TABLE_COLUMNS.AVATAR: - columnWidth = {...getWidthStyle(variables.w40), ...styles.alignItemsCenter}; + columnWidth = {...getWidthStyle(variables.w28), ...styles.alignItemsCenter}; break; case CONST.SEARCH.TABLE_COLUMNS.STATUS: columnWidth = {...getWidthStyle(variables.w80), ...styles.alignItemsCenter}; From 9bc50e82224d8e5141881b525458d6592c55e00f Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Tue, 17 Mar 2026 15:24:29 +0000 Subject: [PATCH 47/69] Use 28x28 avatars in ReportSearchHeader for grouped headers and Reports page Pass size={CONST.AVATAR_SIZE.SMALL} (28px) to AvatarWithDisplayName in ReportSearchHeader, which is used by both the Reports > Reports page and Expenses tab grouped headers. Previously defaulted to AVATAR_SIZE.DEFAULT (40px). Co-authored-by: Shawn Borton --- src/components/ReportSearchHeader/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/ReportSearchHeader/index.tsx b/src/components/ReportSearchHeader/index.tsx index b6f3d61744066..24683c9d4cd76 100755 --- a/src/components/ReportSearchHeader/index.tsx +++ b/src/components/ReportSearchHeader/index.tsx @@ -3,6 +3,7 @@ import {View} from 'react-native'; import AvatarWithDisplayName from '@components/AvatarWithDisplayName'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; +import CONST from '@src/CONST'; import type ReportSearchHeaderProps from './types'; function ReportSearchHeader({report, style, transactions, avatarBorderColor}: ReportSearchHeaderProps) { @@ -23,6 +24,7 @@ function ReportSearchHeader({report, style, transactions, avatarBorderColor}: Re shouldEnableDetailPageNavigation={false} shouldEnableAvatarNavigation={false} avatarBorderColor={avatarBorderColor} + size={CONST.AVATAR_SIZE.SMALL} customDisplayNameStyle={styles.fontWeightNormal} parentNavigationSubtitleTextStyles={[styles.textLineHeightNormal, styles.minHeight4, styles.mt1, !isLargeScreenWidth && styles.textMicro]} parentNavigationStatusContainerStyles={statusContainerStyle} From d13a05a2b67ef1a74849ed93ff12021160c04eac Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Tue, 17 Mar 2026 15:52:54 +0000 Subject: [PATCH 48/69] Reduce table header left padding from 16px to 12px after checkbox Co-authored-by: Shawn Borton --- src/components/SelectionListWithSections/SearchTableHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionListWithSections/SearchTableHeader.tsx b/src/components/SelectionListWithSections/SearchTableHeader.tsx index 7d05263b54a09..1b97908156497 100644 --- a/src/components/SelectionListWithSections/SearchTableHeader.tsx +++ b/src/components/SelectionListWithSections/SearchTableHeader.tsx @@ -532,7 +532,7 @@ function SearchTableHeader({ // In GroupBy views, disable flex expansion for Total columns so Expenses column gets more space shouldRemoveTotalColumnFlex={!!groupBy && !isExpenseReportView} // Don't butt up against the 'select all' checkbox if present - containerStyles={canSelectMultiple && [styles.pl4]} + containerStyles={canSelectMultiple && [styles.pl3]} onSortPress={(columnName, order) => { if (columnName === CONST.SEARCH.TABLE_COLUMNS.COMMENTS) { return; From 233ebd5a24dcc35ff119ff438485dbccaa14bec4 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Tue, 17 Mar 2026 15:58:30 +0000 Subject: [PATCH 49/69] Update receipt thumbnail dimensions to 28x32px MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change receipt cell from 40px wide × 36px tall to 28px wide × 32px tall. This applies to all expense rows: Reports > Expenses, grouped totals, and expense report views, since they all use the ReceiptCell component. Co-authored-by: Shawn Borton --- src/components/TransactionItemRow/DataCells/ReceiptCell.tsx | 2 +- src/styles/variables.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/TransactionItemRow/DataCells/ReceiptCell.tsx b/src/components/TransactionItemRow/DataCells/ReceiptCell.tsx index b833a4ec6d923..bd493a1ca4366 100644 --- a/src/components/TransactionItemRow/DataCells/ReceiptCell.tsx +++ b/src/components/TransactionItemRow/DataCells/ReceiptCell.tsx @@ -56,7 +56,7 @@ function ReceiptCell({transactionItem, isSelected, style}: {transactionItem: Tra return ( Date: Tue, 17 Mar 2026 17:37:21 +0000 Subject: [PATCH 50/69] Fix receipt thumbnail dimensions: swap width/height parameters MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit getWidthAndHeightStyle takes (width, height) but the parameters were swapped, producing 32x28 instead of 28x32. Corrected to getWidthAndHeightStyle(w28, h32) for 28px wide × 32px tall. Co-authored-by: Shawn Borton --- src/components/TransactionItemRow/DataCells/ReceiptCell.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TransactionItemRow/DataCells/ReceiptCell.tsx b/src/components/TransactionItemRow/DataCells/ReceiptCell.tsx index bd493a1ca4366..3d38388fefe1b 100644 --- a/src/components/TransactionItemRow/DataCells/ReceiptCell.tsx +++ b/src/components/TransactionItemRow/DataCells/ReceiptCell.tsx @@ -56,7 +56,7 @@ function ReceiptCell({transactionItem, isSelected, style}: {transactionItem: Tra return ( Date: Tue, 17 Mar 2026 17:48:27 +0000 Subject: [PATCH 51/69] Reduce receipt column width from 36px to 28px to match ReceiptCell The ReceiptCell component renders at 28x32, but the receipt column container was still 36px wide (the old receipt size). This updates the column width to match, removing unnecessary whitespace around the receipt thumbnail. COMMENTS column remains at 36px. Co-authored-by: Shawn Borton --- src/styles/utils/index.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index ba52f46db5a6d..fba58e6ee869a 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1800,9 +1800,11 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ let columnWidth; switch (columnName) { case CONST.SEARCH.TABLE_COLUMNS.COMMENTS: - case CONST.SEARCH.TABLE_COLUMNS.RECEIPT: columnWidth = {...getWidthStyle(variables.w36), ...styles.alignItemsCenter}; break; + case CONST.SEARCH.TABLE_COLUMNS.RECEIPT: + columnWidth = {...getWidthStyle(variables.w28), ...styles.alignItemsCenter}; + break; case CONST.SEARCH.TABLE_COLUMNS.AVATAR: columnWidth = {...getWidthStyle(variables.w28), ...styles.alignItemsCenter}; break; From 9ff002c0c33289e19e902a1560ef320e338b90f1 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Tue, 17 Mar 2026 19:11:39 +0000 Subject: [PATCH 52/69] Fix date column always showing 92px width on Expenses tab The shouldShowYear function was incorrectly setting shouldShowYearCreated based on report action dates and report creation dates when computing column widths for the Expenses tab. Report action created dates don't correspond to any displayed column, and report creation dates are only relevant for the Reports tab DATE column. Changes: - Remove report action entry block that polluted shouldShowYearCreated - Guard report entry item.created check with checkOnlyReports so only the Reports tab uses report creation dates for the DATE column width Co-authored-by: Shawn Borton --- src/libs/SearchUIUtils.ts | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts index e73a1e6ab4148..c9a7290333b7f 100644 --- a/src/libs/SearchUIUtils.ts +++ b/src/libs/SearchUIUtils.ts @@ -1491,18 +1491,10 @@ function shouldShowYear( if (exportedAction?.created && DateUtils.doesDateBelongToAPastYear(exportedAction.created)) { result.shouldShowYearExported = true; } - } else if (!checkOnlyReports && isReportActionEntry(key)) { - const item = data[key]; - for (const action of Object.values(item)) { - const date = action.created; - if (DateUtils.doesDateBelongToAPastYear(date)) { - result.shouldShowYearCreated = true; - } - } } else if (isReportEntry(key)) { const item = data[key]; - if (item.created && DateUtils.doesDateBelongToAPastYear(item.created)) { + if (checkOnlyReports && item.created && DateUtils.doesDateBelongToAPastYear(item.created)) { result.shouldShowYearCreated = true; } if (item.submitted && DateUtils.doesDateBelongToAPastYear(item.submitted)) { From 363091b2be105f95f84de91a8aa3336dfb780edc Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Tue, 17 Mar 2026 19:27:52 +0000 Subject: [PATCH 53/69] Update selected row border color to buttonHoveredBG and remove table bottom padding MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Change bottom border color to theme.buttonHoveredBG when a row is selected via checkbox (all themes), falling back to theme.border when unselected. Applied to ExpenseReportListItem, TransactionGroupListItem, TransactionListItem, and TaskListItem. - Remove bottom padding from the search list content container (pb3 → pb0). Co-authored-by: Shawn Borton --- src/components/Search/index.tsx | 2 +- .../SelectionListWithSections/Search/ExpenseReportListItem.tsx | 2 +- .../SelectionListWithSections/Search/TaskListItem.tsx | 2 +- .../Search/TransactionGroupListItem.tsx | 2 +- .../SelectionListWithSections/Search/TransactionListItem.tsx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 68719073383c3..214fa6515e26a 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -1503,7 +1503,7 @@ function Search({ ) } - contentContainerStyle={[styles.pb3, contentContainerStyle]} + contentContainerStyle={[styles.pb0, contentContainerStyle]} containerStyle={[styles.pv0, !tableHeaderVisible && !isSmallScreenWidth && styles.pt3]} shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()} onScroll={onSearchListScroll} diff --git a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx index 3b0b8008058c0..7e8819a32ce30 100644 --- a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx +++ b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx @@ -247,7 +247,7 @@ function ExpenseReportListItem({ pressableWrapperStyle={[ styles.mh5, animatedHighlightStyle, - isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: theme.border}, + isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: item.isSelected ? theme.buttonHoveredBG : theme.border}, isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}, ]} accessible={false} diff --git a/src/components/SelectionListWithSections/Search/TaskListItem.tsx b/src/components/SelectionListWithSections/Search/TaskListItem.tsx index 687694e65f08d..7bf14a8d24320 100644 --- a/src/components/SelectionListWithSections/Search/TaskListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TaskListItem.tsx @@ -72,7 +72,7 @@ function TaskListItem({ onLongPressRow={onLongPressRow} shouldSyncFocus={shouldSyncFocus} hoverStyle={item.isSelected && styles.activeComponentBG} - pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: 1, borderColor: theme.border}]} + pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: 1, borderColor: item.isSelected ? theme.buttonHoveredBG : theme.border}]} forwardedFSClass={fsClass} > ({ styles.mh5, animatedHighlightStyle, styles.userSelectNone, - isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: theme.border}, + isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: isItemSelected ? theme.buttonHoveredBG : theme.border}, isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}, ]} > diff --git a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx index a68ddaefb0e24..020eebc054ce4 100644 --- a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx @@ -202,7 +202,7 @@ function TransactionListItem({ styles.flex1, animatedHighlightStyle, styles.userSelectNone, - isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: theme.border}, + isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: item.isSelected ? theme.buttonHoveredBG : theme.border}, isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}, ]} > From ace010bdeeb0ecbf1424ee2c3933b7d782baab02 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Tue, 17 Mar 2026 19:32:25 +0000 Subject: [PATCH 54/69] Fix: run prettier on TaskListItem.tsx Co-authored-by: Shawn Borton --- .../SelectionListWithSections/Search/TaskListItem.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/SelectionListWithSections/Search/TaskListItem.tsx b/src/components/SelectionListWithSections/Search/TaskListItem.tsx index 7bf14a8d24320..a5d4062f64b39 100644 --- a/src/components/SelectionListWithSections/Search/TaskListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TaskListItem.tsx @@ -72,7 +72,11 @@ function TaskListItem({ onLongPressRow={onLongPressRow} shouldSyncFocus={shouldSyncFocus} hoverStyle={item.isSelected && styles.activeComponentBG} - pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: 1, borderColor: item.isSelected ? theme.buttonHoveredBG : theme.border}]} + pressableWrapperStyle={[ + styles.mh5, + animatedHighlightStyle, + isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: 1, borderColor: item.isSelected ? theme.buttonHoveredBG : theme.border}, + ]} forwardedFSClass={fsClass} > Date: Tue, 17 Mar 2026 19:34:01 +0000 Subject: [PATCH 55/69] Revert search list content container padding change (pb0 back to pb3) The bottom padding removal from the search list was not intended. Only the expense report table (MoneyRequestReportTransactionItem) should have tighter padding, which is already applied. Co-authored-by: Shawn Borton --- src/components/Search/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 214fa6515e26a..68719073383c3 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -1503,7 +1503,7 @@ function Search({ ) } - contentContainerStyle={[styles.pb0, contentContainerStyle]} + contentContainerStyle={[styles.pb3, contentContainerStyle]} containerStyle={[styles.pv0, !tableHeaderVisible && !isSmallScreenWidth && styles.pt3]} shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()} onScroll={onSearchListScroll} From 49b0483ea9e99a74ad606d2980c44a4002eef9e5 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Wed, 18 Mar 2026 01:00:25 +0000 Subject: [PATCH 56/69] Remove 16px bottom padding from expense report transaction list Remove styles.pb4 from the transaction list container in MoneyRequestReportTransactionList to eliminate the extra bottom padding when viewing an expense report. Co-authored-by: Shawn Borton --- .../MoneyRequestReportTransactionList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index b0de19299654a..d60ef005e80e0 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -527,7 +527,7 @@ function MoneyRequestReportTransactionList({ const transactionListContent = ( {shouldShowGroupedTransactions From 6b8886b810f528d302163e2ba1448fa02bff3a49 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Wed, 18 Mar 2026 01:22:16 +0000 Subject: [PATCH 57/69] Update min row height to 56px and add selected border color to TableListItem - Change optionRowHeightCompact from 52px to 56px - Add buttonHoveredBG border color when row is selected in TableListItem (already present in TransactionListItem, TransactionGroupListItem, and ExpenseReportListItem) Co-authored-by: Shawn Borton --- src/components/SelectionList/ListItem/TableListItem.tsx | 2 +- src/styles/variables.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionList/ListItem/TableListItem.tsx b/src/components/SelectionList/ListItem/TableListItem.tsx index 29591525e91ca..756281d0e65a4 100644 --- a/src/components/SelectionList/ListItem/TableListItem.tsx +++ b/src/components/SelectionList/ListItem/TableListItem.tsx @@ -73,7 +73,7 @@ function TableListItem({ pressableWrapperStyle={[ styles.mh5, animatedHighlightStyle, - isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: theme.border}, + isLargeScreenWidth && {borderRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: item.isSelected ? theme.buttonHoveredBG : theme.border}, isLargeScreenWidth && isLastItem && {borderBottomLeftRadius: 8, borderBottomRightRadius: 8}, ]} wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter]} diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 3a1a47ef60c74..f5e9769747801 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -119,7 +119,7 @@ export default { tooltipZIndex: 10050, gutterWidth: 12, optionRowHeight: 64, - optionRowHeightCompact: 52, + optionRowHeightCompact: 56, sectionMenuItemHeight: 52, sectionMenuItemHeightCompact: 44, optionsListSectionHeaderHeight: getValueUsingPixelRatio(32, 38), From 7324003a2809b2c9c00ef91831e9bc7c2e67d962 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Wed, 18 Mar 2026 01:54:31 +0000 Subject: [PATCH 58/69] Add thin scrollbar styling to prevent header/body offset on web On macOS Chrome with a mouse connected, persistent scrollbars take up ~15px of layout space, causing the table header and body to be misaligned on Reports pages. This adds global thin scrollbar CSS (scrollbar-width: thin + webkit scrollbar pseudo-elements) which reduces the scrollbar to ~6px with a subtle semi-transparent thumb. Co-authored-by: Shawn Borton --- web/index.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/web/index.html b/web/index.html index 491e7e74aa80e..ce9ccfeae7da2 100644 --- a/web/index.html +++ b/web/index.html @@ -91,6 +91,24 @@ display: none; } + /* Thin scrollbars to prevent layout shift on systems with persistent scrollbars (e.g. macOS with mouse) */ + * { + scrollbar-width: thin; + scrollbar-color: rgba(128, 128, 128, 0.4) transparent; + } + *::-webkit-scrollbar { + width: 6px; + height: 6px; + background: transparent; + } + *::-webkit-scrollbar-thumb { + background: rgba(128, 128, 128, 0.4); + border-radius: 3px; + } + *::-webkit-scrollbar-track { + background: transparent; + } + /* Customize Plaid iframe */ [id^="plaid-link-iframe"] { color-scheme: dark !important; From 4a5ac25d775d723373f1bf9435336ca9314fd1ce Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Wed, 18 Mar 2026 01:59:47 +0000 Subject: [PATCH 59/69] Use dedicated tableRowHeight variable instead of optionRowHeightCompact Add a new `tableRowHeight` variable (56px) for table row minimum height and revert `optionRowHeightCompact` back to its original value (52px). This separates table row sizing from option row sizing so changes to one don't affect the other. Co-authored-by: Shawn Borton --- .../MoneyRequestReportTransactionItem.tsx | 2 +- src/components/SelectionList/ListItem/TableListItem.tsx | 2 +- .../SelectionListWithSections/Search/ExpenseReportListItem.tsx | 2 +- .../SelectionListWithSections/Search/TaskListItem.tsx | 2 +- .../Search/TransactionGroupListItem.tsx | 2 +- .../SelectionListWithSections/Search/TransactionListItem.tsx | 2 +- src/styles/variables.ts | 3 ++- 7 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index e056b5a1b33d9..ed1d31ba7a667 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -133,7 +133,7 @@ function MoneyRequestReportTransactionItem({ id={transaction.transactionID} style={[ styles.transactionListItemStyle, - isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}, + isLargeScreenWidth && {minHeight: variables.tableRowHeight, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}, ]} hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} diff --git a/src/components/SelectionList/ListItem/TableListItem.tsx b/src/components/SelectionList/ListItem/TableListItem.tsx index 756281d0e65a4..098714b22669a 100644 --- a/src/components/SelectionList/ListItem/TableListItem.tsx +++ b/src/components/SelectionList/ListItem/TableListItem.tsx @@ -63,7 +63,7 @@ function TableListItem({ isLargeScreenWidth && [ styles.ph3, styles.pv2, - {minHeight: variables.optionRowHeightCompact, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}, + {minHeight: variables.tableRowHeight, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}, ], // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle item.shouldAnimateInHighlight ? styles.bgTransparent : undefined, diff --git a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx index 7e8819a32ce30..9fa258b79160e 100644 --- a/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx +++ b/src/components/SelectionListWithSections/Search/ExpenseReportListItem.tsx @@ -164,7 +164,7 @@ function ExpenseReportListItem({ styles.selectionListPressableItemWrapper, isLargeScreenWidth ? styles.pv2 : styles.pv3, styles.ph3, - isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}, + isLargeScreenWidth && {minHeight: variables.tableRowHeight, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}, // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle styles.bgTransparent, item.isSelected && styles.activeComponentBG, diff --git a/src/components/SelectionListWithSections/Search/TaskListItem.tsx b/src/components/SelectionListWithSections/Search/TaskListItem.tsx index a5d4062f64b39..6b6bbdf895c7a 100644 --- a/src/components/SelectionListWithSections/Search/TaskListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TaskListItem.tsx @@ -33,7 +33,7 @@ function TaskListItem({ styles.selectionListPressableItemWrapper, isLargeScreenWidth ? styles.pv2 : styles.pv3, styles.ph3, - isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0}, + isLargeScreenWidth && {minHeight: variables.tableRowHeight, borderRadius: 0}, // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle styles.bgTransparent, item.isSelected && styles.activeComponentBG, diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index ac5719470f7f7..7f47fdec0dfad 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -185,7 +185,7 @@ function TransactionGroupListItem({ const pressableStyle = [ styles.transactionGroupListItemStyle, - isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}, + isLargeScreenWidth && {minHeight: variables.tableRowHeight, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}, isItemSelected && styles.activeComponentBG, ]; diff --git a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx index 020eebc054ce4..e180d019accac 100644 --- a/src/components/SelectionListWithSections/Search/TransactionListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionListItem.tsx @@ -101,7 +101,7 @@ function TransactionListItem({ const pressableStyle = [ styles.transactionListItemStyle, !isLargeScreenWidth && styles.pt3, - isLargeScreenWidth && {minHeight: variables.optionRowHeightCompact, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}, + isLargeScreenWidth && {minHeight: variables.tableRowHeight, borderRadius: 0, ...(isLastItem ? {borderBottomLeftRadius: 8, borderBottomRightRadius: 8} : {})}, item.isSelected && styles.activeComponentBG, isLargeScreenWidth ? {...styles.flexRow, ...styles.justifyContentBetween, ...styles.alignItemsCenter} : {...styles.flexColumn, ...styles.alignItemsStretch}, ]; diff --git a/src/styles/variables.ts b/src/styles/variables.ts index f5e9769747801..cc72fe6fc8256 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -119,7 +119,8 @@ export default { tooltipZIndex: 10050, gutterWidth: 12, optionRowHeight: 64, - optionRowHeightCompact: 56, + optionRowHeightCompact: 52, + tableRowHeight: 56, sectionMenuItemHeight: 52, sectionMenuItemHeightCompact: 44, optionsListSectionHeaderHeight: getValueUsingPixelRatio(32, 38), From cc6eba1d4766e25d53229c30738744bb61ddca20 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Wed, 18 Mar 2026 02:05:40 +0000 Subject: [PATCH 60/69] Revert scrollbar CSS, narrow Total column on Reports page 1. Removed thin scrollbar CSS from web/index.html (reverting the previous scrollbar change) 2. Added shouldRemoveTotalColumnFlex=true to the TOTAL, REIMBURSABLE_TOTAL, and NON_REIMBURSABLE_TOTAL columns in ExpenseReportListItemRow so the Total column uses its base width (96px/130px) instead of flex-expanding on Reports > Reports 3. Updated SearchTableHeader to also disable flex on Total columns for the expense report type, keeping header and data aligned Co-authored-by: Shawn Borton --- .../Search/ExpenseReportListItemRow.tsx | 6 +++--- .../SearchTableHeader.tsx | 4 ++-- web/index.html | 18 ------------------ 3 files changed, 5 insertions(+), 23 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx b/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx index 416a3bb202f5e..783233e0d5cf4 100644 --- a/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx +++ b/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx @@ -150,7 +150,7 @@ function ExpenseReportListItemRow({ ), [CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE_TOTAL]: ( - + ), [CONST.SEARCH.TABLE_COLUMNS.NON_REIMBURSABLE_TOTAL]: ( - + ), [CONST.SEARCH.TABLE_COLUMNS.TOTAL]: ( - + Reports page + shouldRemoveTotalColumnFlex={(!!groupBy && !isExpenseReportView) || type === CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT} // Don't butt up against the 'select all' checkbox if present containerStyles={canSelectMultiple && [styles.pl3]} onSortPress={(columnName, order) => { diff --git a/web/index.html b/web/index.html index ce9ccfeae7da2..491e7e74aa80e 100644 --- a/web/index.html +++ b/web/index.html @@ -91,24 +91,6 @@ display: none; } - /* Thin scrollbars to prevent layout shift on systems with persistent scrollbars (e.g. macOS with mouse) */ - * { - scrollbar-width: thin; - scrollbar-color: rgba(128, 128, 128, 0.4) transparent; - } - *::-webkit-scrollbar { - width: 6px; - height: 6px; - background: transparent; - } - *::-webkit-scrollbar-thumb { - background: rgba(128, 128, 128, 0.4); - border-radius: 3px; - } - *::-webkit-scrollbar-track { - background: transparent; - } - /* Customize Plaid iframe */ [id^="plaid-link-iframe"] { color-scheme: dark !important; From 8bda63dd3840bf72597cc8fde6b9d161a7ee5b86 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Wed, 18 Mar 2026 13:53:09 +0000 Subject: [PATCH 61/69] Update group header checkboxes, type icons, and avatar sizes - Add containerStyle and consistent props to Checkbox in all group header components (BaseListItemHeader, MemberListItemHeader, CardListItemHeader, WithdrawalIDListItemHeader) matching the pattern used in other table row checkboxes - Reduce expense type icons from 20x20 to 16x16 in TypeCell and update the Type column width from 20px to 16px - Set grouping row avatars to 28x28 (AVATAR_SIZE.SMALL) in MemberListItemHeader and CardListItemHeader Co-authored-by: Shawn Borton --- .../SelectionListWithSections/Search/BaseListItemHeader.tsx | 3 +++ .../SelectionListWithSections/Search/CardListItemHeader.tsx | 5 +++++ .../Search/MemberListItemHeader.tsx | 5 +++++ .../Search/WithdrawalIDListItemHeader.tsx | 3 +++ src/components/TransactionItemRow/DataCells/TypeCell.tsx | 4 ++-- src/styles/utils/index.ts | 2 +- 6 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/BaseListItemHeader.tsx b/src/components/SelectionListWithSections/Search/BaseListItemHeader.tsx index 90d28d76f24a2..b76d7a68ed6a5 100644 --- a/src/components/SelectionListWithSections/Search/BaseListItemHeader.tsx +++ b/src/components/SelectionListWithSections/Search/BaseListItemHeader.tsx @@ -146,8 +146,11 @@ function BaseListItemHeader({ onPress={() => onCheckboxPress?.(item as unknown as TItem)} isChecked={isSelectAllChecked} isIndeterminate={isIndeterminate} + containerStyle={[StyleUtils.getCheckboxContainerStyle(20)]} disabled={!!isDisabled || item.isDisabledCheckbox} accessibilityLabel={translate('common.select')} + shouldStopMouseDownPropagation + style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle()]} sentryLabel={CONST.SENTRY_LABEL.SEARCH.GROUP_SELECT_ALL_CHECKBOX} /> )} diff --git a/src/components/SelectionListWithSections/Search/CardListItemHeader.tsx b/src/components/SelectionListWithSections/Search/CardListItemHeader.tsx index cad4038da0904..555b94902b3bd 100644 --- a/src/components/SelectionListWithSections/Search/CardListItemHeader.tsx +++ b/src/components/SelectionListWithSections/Search/CardListItemHeader.tsx @@ -128,8 +128,11 @@ function CardListItemHeader({ onPress={() => onCheckboxPress?.(cardItem as unknown as TItem)} isChecked={isSelectAllChecked} isIndeterminate={isIndeterminate} + containerStyle={[StyleUtils.getCheckboxContainerStyle(20)]} disabled={!!isDisabled || cardItem.isDisabledCheckbox} accessibilityLabel={translate('common.select')} + shouldStopMouseDownPropagation + style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle()]} /> )} {!isLargeScreenWidth && ( @@ -139,6 +142,7 @@ function CardListItemHeader({ subscriptAvatarBorderColor={backgroundColor} noRightMarginOnSubscriptContainer accountIDs={[cardItem.accountID]} + size={CONST.AVATAR_SIZE.SMALL} /> ({ subscriptAvatarBorderColor={backgroundColor} noRightMarginOnSubscriptContainer accountIDs={[cardItem.accountID]} + size={CONST.AVATAR_SIZE.SMALL} /> diff --git a/src/components/SelectionListWithSections/Search/MemberListItemHeader.tsx b/src/components/SelectionListWithSections/Search/MemberListItemHeader.tsx index 38149e9d55cf8..4f50cef9f933f 100644 --- a/src/components/SelectionListWithSections/Search/MemberListItemHeader.tsx +++ b/src/components/SelectionListWithSections/Search/MemberListItemHeader.tsx @@ -111,8 +111,11 @@ function MemberListItemHeader({ onPress={() => onCheckboxPress?.(memberItem as unknown as TItem)} isChecked={isSelectAllChecked} isIndeterminate={isIndeterminate} + containerStyle={[StyleUtils.getCheckboxContainerStyle(20)]} disabled={!!isDisabled || memberItem.isDisabledCheckbox} accessibilityLabel={translate('common.select')} + shouldStopMouseDownPropagation + style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle()]} /> )} {!isLargeScreenWidth && ( @@ -124,6 +127,7 @@ function MemberListItemHeader({ type={CONST.ICON_TYPE_AVATAR} name={formattedDisplayName} avatarID={memberItem.accountID} + size={CONST.AVATAR_SIZE.SMALL} /> @@ -149,6 +153,7 @@ function MemberListItemHeader({ type={CONST.ICON_TYPE_AVATAR} name={formattedDisplayName} avatarID={memberItem.accountID} + size={CONST.AVATAR_SIZE.SMALL} /> diff --git a/src/components/SelectionListWithSections/Search/WithdrawalIDListItemHeader.tsx b/src/components/SelectionListWithSections/Search/WithdrawalIDListItemHeader.tsx index 6e63f3f9b9f81..7d2a5332dba9a 100644 --- a/src/components/SelectionListWithSections/Search/WithdrawalIDListItemHeader.tsx +++ b/src/components/SelectionListWithSections/Search/WithdrawalIDListItemHeader.tsx @@ -171,9 +171,12 @@ function WithdrawalIDListItemHeader({ onCheckboxPress?.(withdrawalIDItem as unknown as TItem)} isChecked={isSelectAllChecked} + containerStyle={[StyleUtils.getCheckboxContainerStyle(20)]} disabled={!!isDisabled || withdrawalIDItem.isDisabledCheckbox} accessibilityLabel={translate('common.select')} isIndeterminate={isIndeterminate} + shouldStopMouseDownPropagation + style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle()]} /> )} {!isLargeScreenWidth && ( diff --git a/src/components/TransactionItemRow/DataCells/TypeCell.tsx b/src/components/TransactionItemRow/DataCells/TypeCell.tsx index 03d9ff0cf7690..c93aebd28477b 100644 --- a/src/components/TransactionItemRow/DataCells/TypeCell.tsx +++ b/src/components/TransactionItemRow/DataCells/TypeCell.tsx @@ -83,8 +83,8 @@ function TypeCell({transactionItem, shouldUseNarrowLayout, shouldShowTooltip}: T diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index fba58e6ee869a..e22b38759b7c2 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1859,7 +1859,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ columnWidth = {...getWidthStyle(isAmountColumnWide ? variables.w130 : variables.w96), ...(!shouldRemoveTotalColumnFlex && styles.flex1), ...styles.alignItemsEnd}; break; case CONST.SEARCH.TABLE_COLUMNS.TYPE: - columnWidth = {...getWidthStyle(variables.w20), ...styles.alignItemsCenter}; + columnWidth = {...getWidthStyle(variables.w16), ...styles.alignItemsCenter}; break; case CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE: case CONST.SEARCH.TABLE_COLUMNS.BILLABLE: From f2d1cf634c70992a3894ffed4da418fac9531718 Mon Sep 17 00:00:00 2001 From: "Shawn Borton (via MelvinBot)" Date: Wed, 18 Mar 2026 13:59:20 +0000 Subject: [PATCH 62/69] Fix highlight border radius on desktop and domains empty state banner - Set animated highlight borderRadius to 0 on desktop for all search list items (TransactionListItem, TransactionGroupListItem, ExpenseReportListItem, TaskListItem) so the yellow highlight respects the new flat-edge design (0 border radius, except bottom-left/bottom-right 8px for last items) - Update DomainsEmptyStateComponent to use 0 top radius and 8px bottom radius instead of 16px all-corners Co-authored-by: Shawn Borton --- src/components/DomainsEmptyStateComponent.tsx | 2 +- .../SelectionListWithSections/Search/ExpenseReportListItem.tsx | 2 +- .../SelectionListWithSections/Search/TaskListItem.tsx | 2 +- .../Search/TransactionGroupListItem.tsx | 2 +- .../SelectionListWithSections/Search/TransactionListItem.tsx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/DomainsEmptyStateComponent.tsx b/src/components/DomainsEmptyStateComponent.tsx index 8864f5b079b47..e3d4227582469 100644 --- a/src/components/DomainsEmptyStateComponent.tsx +++ b/src/components/DomainsEmptyStateComponent.tsx @@ -21,7 +21,7 @@ function DomainsEmptyStateComponent() { title={translate('domain.enhancedSecurity.title')} subtitle={translate('domain.enhancedSecurity.subtitle')} subtitleStyle={[styles.textLabelSupporting, styles.pt1]} - style={[styles.borderRadiusComponentLarge, styles.highlightBG]} + style={[{borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 8, borderBottomRightRadius: 8}, styles.highlightBG]} rightComponent={