From bfbe443cffdedede28599ea5ae08743a93e4c1a0 Mon Sep 17 00:00:00 2001 From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com> Date: Sat, 21 Feb 2026 07:47:05 +0000 Subject: [PATCH 1/5] =?UTF-8?q?Fix:=20=E2=80=9CReimbursable=E2=80=9D=20col?= =?UTF-8?q?umn=20width=20is=20wider=20than=20necessary=20on=20report=20pag?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/libs/SearchUIUtils.ts | 2 +- src/styles/utils/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts index 50df8490b6dc2..8330fa8df2886 100644 --- a/src/libs/SearchUIUtils.ts +++ b/src/libs/SearchUIUtils.ts @@ -4295,7 +4295,7 @@ function getTableMinWidth(columns: SearchColumnType[]) { } else if (column === CONST.SEARCH.TABLE_COLUMNS.TYPE) { minWidth += 20; } else if (column === CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE || column === CONST.SEARCH.TABLE_COLUMNS.BILLABLE) { - minWidth += 92; + minWidth += 72; } else { minWidth += 200; } diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 8933b41e1e65b..53238104232d1 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1814,7 +1814,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ break; case CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE: case CONST.SEARCH.TABLE_COLUMNS.BILLABLE: - columnWidth = {...getWidthStyle(variables.w92)}; + columnWidth = {...getWidthStyle(variables.w72)}; break; case CONST.SEARCH.TABLE_COLUMNS.TAX_RATE: columnWidth = {...getWidthStyle(variables.w92), ...styles.flex1}; From 1b797e8dc04a6e6f15325158fde137c87f761230 Mon Sep 17 00:00:00 2001 From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com> Date: Tue, 3 Mar 2026 10:57:32 +0000 Subject: [PATCH 2/5] fix width --- .../MoneyRequestReportTableHeader.tsx | 1 + .../MoneyRequestReportTransactionItem.tsx | 1 + src/components/TransactionItemRow/index.tsx | 18 +++++++++++++++++- src/libs/SearchUIUtils.ts | 2 +- src/styles/utils/index.ts | 2 +- 5 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx index 102f059c8c161..45808ec84a2d0 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx @@ -88,6 +88,7 @@ function MoneyRequestReportTableHeader({ sortBy={sortBy} sortOrder={sortOrder} onSortPress={onSortPress} + shouldRemoveTotalColumnFlex /> ); diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index da6b76dc384b0..509ddf35b59eb 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -155,6 +155,7 @@ function MoneyRequestReportTransactionItem({ }} onArrowRightPress={() => onArrowRightPress?.(transaction.transactionID)} isHover={hovered} + shouldRemoveTotalColumnFlex /> )} diff --git a/src/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx index 6cf850a7cf546..bce065338cc28 100644 --- a/src/components/TransactionItemRow/index.tsx +++ b/src/components/TransactionItemRow/index.tsx @@ -137,6 +137,9 @@ type TransactionItemRowProps = { customCardNames?: Record; reportActions?: ReportAction[]; checkboxSentryLabel?: string; + + /** Whether to remove flex from the total amount column */ + shouldRemoveTotalColumnFlex?: boolean; }; const EMPTY_ACTIVE_STYLE: StyleProp = []; @@ -188,6 +191,7 @@ function TransactionItemRow({ customCardNames, reportActions, checkboxSentryLabel, + shouldRemoveTotalColumnFlex = false, }: TransactionItemRowProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -519,7 +523,19 @@ function TransactionItemRow({ return ( ({ break; case CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE: case CONST.SEARCH.TABLE_COLUMNS.BILLABLE: - columnWidth = {...getWidthStyle(variables.w72)}; + columnWidth = {...getWidthStyle(variables.w80)}; break; case CONST.SEARCH.TABLE_COLUMNS.TAX_RATE: columnWidth = {...getWidthStyle(variables.w92), ...styles.flex1}; From 5d51a1b5c5fda57f1e89cc1cd90cabd2192fa6a6 Mon Sep 17 00:00:00 2001 From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com> Date: Sun, 15 Mar 2026 09:15:24 +0000 Subject: [PATCH 3/5] fix gap --- .../MoneyRequestReportTableHeader.tsx | 1 - .../MoneyRequestReportTransactionItem.tsx | 1 - src/components/TransactionItemRow/index.tsx | 18 +----------------- src/styles/utils/index.ts | 3 +-- 4 files changed, 2 insertions(+), 21 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx index 45808ec84a2d0..102f059c8c161 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx @@ -88,7 +88,6 @@ function MoneyRequestReportTableHeader({ sortBy={sortBy} sortOrder={sortOrder} onSortPress={onSortPress} - shouldRemoveTotalColumnFlex /> ); diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index eaf7837be49b0..a789adcbf7c39 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -161,7 +161,6 @@ function MoneyRequestReportTransactionItem({ }} onArrowRightPress={() => onArrowRightPress?.(transaction.transactionID)} isHover={hovered} - shouldRemoveTotalColumnFlex /> )} diff --git a/src/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx index 08309a353036f..13a5de8f1debd 100644 --- a/src/components/TransactionItemRow/index.tsx +++ b/src/components/TransactionItemRow/index.tsx @@ -140,9 +140,6 @@ type TransactionItemRowProps = { customCardNames?: Record; reportActions?: ReportAction[]; checkboxSentryLabel?: string; - - /** Whether to remove flex from the total amount column */ - shouldRemoveTotalColumnFlex?: boolean; }; const EMPTY_ACTIVE_STYLE: StyleProp = []; @@ -195,7 +192,6 @@ function TransactionItemRow({ customCardNames, reportActions, checkboxSentryLabel, - shouldRemoveTotalColumnFlex = false, }: TransactionItemRowProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -524,19 +520,7 @@ function TransactionItemRow({ return ( ({ isApprovedColumnWide = false, isPostedColumnWide = false, isExportedColumnWide = false, - shouldRemoveTotalColumnFlex = false, ): ViewStyle => { let columnWidth; switch (columnName) { @@ -1854,7 +1853,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ case CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT: case CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL: 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), ...styles.flex1, ...styles.alignItemsEnd}; break; case CONST.SEARCH.TABLE_COLUMNS.TYPE: columnWidth = {...getWidthStyle(variables.w20), ...styles.alignItemsCenter}; From cf33e17dd3491b8da6bc7fadec1689c0f2527cde Mon Sep 17 00:00:00 2001 From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com> Date: Wed, 18 Mar 2026 11:31:21 +0530 Subject: [PATCH 4/5] Update index.ts --- 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 cba4540a60466..8f5c25b47862d 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1795,6 +1795,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ isApprovedColumnWide = false, isPostedColumnWide = false, isExportedColumnWide = false, + shouldRemoveTotalColumnFlex = false, ): ViewStyle => { let columnWidth; switch (columnName) { @@ -1853,7 +1854,11 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ case CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT: case CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL: case CONST.SEARCH.TABLE_COLUMNS.TOTAL: - columnWidth = {...getWidthStyle(isAmountColumnWide ? variables.w130 : variables.w96), ...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.w20), ...styles.alignItemsCenter}; From 20e675e59f5b795060a079fb1c0ae3e7fdd198ce Mon Sep 17 00:00:00 2001 From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com> Date: Wed, 18 Mar 2026 11:54:17 +0530 Subject: [PATCH 5/5] Update index.ts --- src/styles/utils/index.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 8f5c25b47862d..8b563ab272052 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1854,11 +1854,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ case CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT: case CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL: 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.w20), ...styles.alignItemsCenter};