Skip to content

[CP Staging] Fix Total column not aligned to right edge when no merchant column is visible #89859

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JS00001 merged 7 commits into from
May 7, 2026
+23 −3
Merged

[CP Staging] Fix Total column not aligned to right edge when no merchant column is visible #89859

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
087ebec
Fix Total column not aligned to right edge when no merchant column is…
Krishna2323 May 7, 2026
ef852da
Fix Total column not aligned to right edge when no flex column is vis…
Krishna2323 May 7, 2026
16bf662
Fix crash when columns is undefined in hasFlexColumn
Krishna2323 May 7, 2026
cfffd6f
Only remove Total flex when it is the last column and a flex column e…
Krishna2323 May 7, 2026
638332b
Remove mlAuto from total column styles
Krishna2323 May 7, 2026
a030b2a
Simplify hasFlexColumn and add missing flex columns
Krishna2323 May 7, 2026
45ca157
Merge branch 'Expensify:main' into krishna2323/issue/89838
Krishna2323 May 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -180,7 +181,7 @@ function MoneyRequestReportTransactionItem({
onArrowRightPress={() => onArrowRightPress?.(transaction.transactionID)}
isHover={hovered}
nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
shouldRemoveTotalColumnFlex
shouldRemoveTotalColumnFlex={hasFlexColumn(columns)}
/>
)}
</PressableWithFeedback>
Expand Down
4 changes: 2 additions & 2 deletions src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {compareByRBR} from '@libs/TransactionPreviewUtils';
import {getTransactionPendingAction, isTransactionPendingDelete, shouldShowExpenseBreakdown} from '@libs/TransactionUtils';
Expand Down Expand Up @@ -714,7 +714,7 @@ function MoneyRequestReportTransactionList({
shouldShowSorting
sortBy={sortBy}
sortOrder={sortOrder}
shouldRemoveTotalColumnFlex
shouldRemoveTotalColumnFlex={hasFlexColumn(columnsToShow)}
columns={columnsToShow}
dateColumnSize={dateColumnSize}
amountColumnSize={amountColumnSize}
Expand Down
19 changes: 19 additions & 0 deletions src/libs/SearchUIUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5801,6 +5801,24 @@ function applySelectionToItem(
return {originalItem: item, itemWithSelection: {...item, isSelected, transactions}, isSelected};
}

const FLEX_COLUMNS = new Set<string>([
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,
Comment on lines +5804 to +5809
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot May 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Include all flex-width columns in hasFlexColumn

hasFlexColumn() only treats MERCHANT, DESCRIPTION, CATEGORY, TAG, and TAX_RATE as flexible columns, but getReportTableColumnStyles() also renders other report-detail columns (for example CARD, WITHDRAWAL_ID, and EXCHANGE_RATE) with styles.flex1. In money request report views where one of those columns is the only flexible column and TOTAL is last, this helper returns false and keeps the total column flexible even though another flex column already exists, which regresses the intended width/alignment behavior this change is trying to normalize.

Useful? React with 👍 / 👎.

CONST.SEARCH.TABLE_COLUMNS.CARD,
CONST.SEARCH.TABLE_COLUMNS.EXCHANGE_RATE,
]);

/**
* 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 {
return !!columns?.some((col) => FLEX_COLUMNS.has(col));
}

export {
getSearchBulkEditPolicyID,
getSuggestedSearches,
Expand Down Expand Up @@ -5880,6 +5898,7 @@ export {
FILTER_LABEL_MAP,
doesSearchItemMatchSort,
isPolicyEligibleForSpendOverTime,
hasFlexColumn,
};
export type {
SavedSearchMenuItem,
Expand Down
Loading