From 087ebec650c80e7a670baf083008034e5775a93e Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 7 May 2026 08:33:40 +0530 Subject: [PATCH 1/6] Fix Total column not aligned to right edge when no merchant column is visible Signed-off-by: krishna2323 --- src/styles/utils/index.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 8556779da9a5..476d5bed4658 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1926,7 +1926,12 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ case CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL: case CONST.SEARCH.TABLE_COLUMNS.TOTAL_PER_ATTENDEE: case CONST.SEARCH.TABLE_COLUMNS.TOTAL: - columnWidth = {...getWidthStyle(isAmountColumnWide ? variables.w130 : variables.w96), ...(!shouldRemoveTotalColumnFlex && styles.flex1), ...styles.alignItemsEnd}; + columnWidth = { + ...getWidthStyle(isAmountColumnWide ? variables.w130 : variables.w96), + ...(!shouldRemoveTotalColumnFlex && styles.flex1), + ...(shouldRemoveTotalColumnFlex && styles.mlAuto), + ...styles.alignItemsEnd, + }; break; case CONST.SEARCH.TABLE_COLUMNS.TYPE: columnWidth = {...getWidthStyle(variables.w16), ...styles.alignItemsCenter}; From ef852da9352e35c0eb41097efb8a8c13c4274ff5 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 7 May 2026 08:56:57 +0530 Subject: [PATCH 2/6] Fix Total column not aligned to right edge when no flex column is visible Signed-off-by: krishna2323 --- .../MoneyRequestReportTransactionItem.tsx | 3 ++- .../MoneyRequestReportTransactionList.tsx | 4 ++-- src/libs/SearchUIUtils.ts | 13 +++++++++++++ 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 04c00b51e9b6..f6bc2174070b 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -16,6 +16,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useTransactionViolations from '@hooks/useTransactionViolations'; import ControlSelection from '@libs/ControlSelection'; import canUseTouchScreen from '@libs/DeviceCapabilities/canUseTouchScreen'; +import {hasFlexColumn} from '@libs/SearchUIUtils'; import {getTransactionPendingAction, isTransactionPendingDelete} from '@libs/TransactionUtils'; import variables from '@styles/variables'; import CONST from '@src/CONST'; @@ -180,7 +181,7 @@ function MoneyRequestReportTransactionItem({ onArrowRightPress={() => onArrowRightPress?.(transaction.transactionID)} isHover={hovered} nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards} - shouldRemoveTotalColumnFlex + shouldRemoveTotalColumnFlex={hasFlexColumn(columns)} /> )} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 8dfc916928d6..baf71d470e23 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -60,7 +60,7 @@ import { isSortableColumnName, } from '@libs/ReportUtils'; import type {SortableColumnName} from '@libs/ReportUtils'; -import {compareValues, getColumnsToShow, getTableMinWidth, isTransactionAmountTooLong, isTransactionTaxAmountTooLong} from '@libs/SearchUIUtils'; +import {compareValues, getColumnsToShow, getTableMinWidth, hasFlexColumn, isTransactionAmountTooLong, isTransactionTaxAmountTooLong} from '@libs/SearchUIUtils'; import {getPendingSubmitFollowUpAction} from '@libs/telemetry/submitFollowUpAction'; import {getTransactionPendingAction, isTransactionPendingDelete, shouldShowExpenseBreakdown} from '@libs/TransactionUtils'; import shouldShowTransactionYear from '@libs/TransactionUtils/shouldShowTransactionYear'; @@ -692,7 +692,7 @@ function MoneyRequestReportTransactionList({ shouldShowSorting sortBy={sortBy} sortOrder={sortOrder} - shouldRemoveTotalColumnFlex + shouldRemoveTotalColumnFlex={hasFlexColumn(columnsToShow)} columns={columnsToShow} dateColumnSize={dateColumnSize} amountColumnSize={amountColumnSize} diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts index f3b95f2661e2..12088818677b 100644 --- a/src/libs/SearchUIUtils.ts +++ b/src/libs/SearchUIUtils.ts @@ -5760,6 +5760,18 @@ function applySelectionToItem( return {originalItem: item, itemWithSelection: {...item, isSelected, transactions}, isSelected}; } +const FLEX_COLUMNS = new Set([ + CONST.SEARCH.TABLE_COLUMNS.MERCHANT, + CONST.SEARCH.TABLE_COLUMNS.DESCRIPTION, + CONST.SEARCH.TABLE_COLUMNS.CATEGORY, + CONST.SEARCH.TABLE_COLUMNS.TAG, + CONST.SEARCH.TABLE_COLUMNS.TAX_RATE, +]); + +function hasFlexColumn(columns: SearchColumnType[]): boolean { + return columns.some((col) => FLEX_COLUMNS.has(col)); +} + export { getSearchBulkEditPolicyID, getSuggestedSearches, @@ -5836,6 +5848,7 @@ export { FILTER_LABEL_MAP, doesSearchItemMatchSort, isPolicyEligibleForSpendOverTime, + hasFlexColumn, }; export type { SavedSearchMenuItem, From 16bf66257df5c996b3635d8d0b2cf999305670b8 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 7 May 2026 09:00:31 +0530 Subject: [PATCH 3/6] Fix crash when columns is undefined in hasFlexColumn Signed-off-by: krishna2323 --- src/libs/SearchUIUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts index 12088818677b..a4719bf65d38 100644 --- a/src/libs/SearchUIUtils.ts +++ b/src/libs/SearchUIUtils.ts @@ -5768,8 +5768,8 @@ const FLEX_COLUMNS = new Set([ CONST.SEARCH.TABLE_COLUMNS.TAX_RATE, ]); -function hasFlexColumn(columns: SearchColumnType[]): boolean { - return columns.some((col) => FLEX_COLUMNS.has(col)); +function hasFlexColumn(columns?: SearchColumnType[]): boolean { + return !!columns?.some((col) => FLEX_COLUMNS.has(col)); } export { From cfffd6fd0834d0937f78b204ae769ba54a778415 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 7 May 2026 09:09:38 +0530 Subject: [PATCH 4/6] Only remove Total flex when it is the last column and a flex column exists Signed-off-by: krishna2323 --- src/libs/SearchUIUtils.ts | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts index a4719bf65d38..f5b499bc594a 100644 --- a/src/libs/SearchUIUtils.ts +++ b/src/libs/SearchUIUtils.ts @@ -5768,8 +5768,24 @@ const FLEX_COLUMNS = new Set([ CONST.SEARCH.TABLE_COLUMNS.TAX_RATE, ]); +const TOTAL_COLUMNS = new Set([ + CONST.SEARCH.TABLE_COLUMNS.TOTAL, + CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT, + CONST.SEARCH.TABLE_COLUMNS.TOTAL_PER_ATTENDEE, + CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT, +]); + +/** + * Returns true when it's safe to remove flex from total columns — i.e., another flex column + * exists to fill the space, and the total column is the last visible column. + */ function hasFlexColumn(columns?: SearchColumnType[]): boolean { - return !!columns?.some((col) => FLEX_COLUMNS.has(col)); + if (!columns?.length) { + return false; + } + const lastColumn = columns.at(-1); + const isTotalLastColumn = !!lastColumn && TOTAL_COLUMNS.has(lastColumn); + return isTotalLastColumn && columns.some((col) => FLEX_COLUMNS.has(col)); } export { From 638332bda66fc970d234a5078d0093ee8e599459 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 7 May 2026 09:25:44 +0530 Subject: [PATCH 5/6] Remove mlAuto from total column styles Signed-off-by: krishna2323 --- src/styles/utils/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 476d5bed4658..622b518a2335 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1929,7 +1929,6 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ columnWidth = { ...getWidthStyle(isAmountColumnWide ? variables.w130 : variables.w96), ...(!shouldRemoveTotalColumnFlex && styles.flex1), - ...(shouldRemoveTotalColumnFlex && styles.mlAuto), ...styles.alignItemsEnd, }; break; From a030b2ac0aad6e26fb74c40a6a479b3e15bbcf25 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 8 May 2026 00:54:15 +0530 Subject: [PATCH 6/6] Simplify hasFlexColumn and add missing flex columns Signed-off-by: krishna2323 --- src/libs/SearchUIUtils.ts | 20 +++++--------------- src/styles/utils/index.ts | 6 +----- 2 files changed, 6 insertions(+), 20 deletions(-) diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts index f5b499bc594a..d5fa8637f12d 100644 --- a/src/libs/SearchUIUtils.ts +++ b/src/libs/SearchUIUtils.ts @@ -5766,26 +5766,16 @@ const FLEX_COLUMNS = new Set([ CONST.SEARCH.TABLE_COLUMNS.CATEGORY, CONST.SEARCH.TABLE_COLUMNS.TAG, CONST.SEARCH.TABLE_COLUMNS.TAX_RATE, -]); - -const TOTAL_COLUMNS = new Set([ - CONST.SEARCH.TABLE_COLUMNS.TOTAL, - CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT, - CONST.SEARCH.TABLE_COLUMNS.TOTAL_PER_ATTENDEE, - CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT, + CONST.SEARCH.TABLE_COLUMNS.CARD, + CONST.SEARCH.TABLE_COLUMNS.EXCHANGE_RATE, ]); /** - * Returns true when it's safe to remove flex from total columns — i.e., another flex column - * exists to fill the space, and the total column is the last visible column. + * Returns true when another flex column exists that can fill the remaining space, + * making it safe to remove flex from total columns. */ function hasFlexColumn(columns?: SearchColumnType[]): boolean { - if (!columns?.length) { - return false; - } - const lastColumn = columns.at(-1); - const isTotalLastColumn = !!lastColumn && TOTAL_COLUMNS.has(lastColumn); - return isTotalLastColumn && columns.some((col) => FLEX_COLUMNS.has(col)); + return !!columns?.some((col) => FLEX_COLUMNS.has(col)); } export { diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 622b518a2335..8556779da9a5 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1926,11 +1926,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ case CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL: case CONST.SEARCH.TABLE_COLUMNS.TOTAL_PER_ATTENDEE: case CONST.SEARCH.TABLE_COLUMNS.TOTAL: - columnWidth = { - ...getWidthStyle(isAmountColumnWide ? variables.w130 : variables.w96), - ...(!shouldRemoveTotalColumnFlex && styles.flex1), - ...styles.alignItemsEnd, - }; + columnWidth = {...getWidthStyle(isAmountColumnWide ? variables.w130 : variables.w96), ...(!shouldRemoveTotalColumnFlex && styles.flex1), ...styles.alignItemsEnd}; break; case CONST.SEARCH.TABLE_COLUMNS.TYPE: columnWidth = {...getWidthStyle(variables.w16), ...styles.alignItemsCenter};