[$250] Spend - Amount is not correctly aligned with "Purchase Amount" field name.

[applause-bot]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.4.33-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #95475
Email or phone of affected tester (no customers): ibellicotest+2766@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Windows 11 / Chrome
App Component: Search

Action Performed:

Prerequisite: At least one expense created.

1. Open the staging.new.expensify.com website.
2. Navigate to "Spend" > "Expenses"
3. Click on "Display" > "Edit Columns"
4. Add "Purchase Amount" column and save.
5. Once redirected to "Expenses" again, note that amount on "Purchase Amount" is aligned to the right instead of being correctly aligned with column name.

Expected Result:

Amount on "Purchase Amount" column, should be aligned to the left with the column´s name.

Actual Result:

Amount on "Purchase Amount" column, is aligned to the right and it doesn´t coincide with column´s name alignment.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome Safari

Screenshots/Videos

Bug7205092_1783716272205.Purchase_Amount.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Svetlana Lazutkina
Bug ID: 7205092

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022075695198665229126
• Upwork Job ID: 2075695198665229126
• Last Price Increase: 2026-07-10

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/cbc52be07142145b2fd011681e49b475266ac96b423ea1d16dcdad3a3136e9b7

[MelvinBot]

Proposal

Root Cause

The value and the header of the Purchase amount column derive their horizontal alignment from two different mechanisms, and only the value's is bulletproof:

• Value cell — the amount Text is hard-coded textAlignRight inside a right-aligned, width-bounded container, so the number is always flush-right. See TotalCell.tsx:25 (used as AmountCell at TransactionItemRowWide.tsx:476-487).
• Header cell — the header label sets no textAlign; it relies only on the container's alignItemsEnd, and the label is rendered in a flexRow with numberOfLines={1} and no width bound / no flexShrink. See SortableHeaderText.tsx:100-107.

The amount column is a fixed narrow width — w96 (96px), or w130 when wide (index.ts:1945-1952). Short amount labels ("Amount", "Total", "Tax") fit inside it and sit flush-right, so the asymmetry is invisible for them. "Purchase amount" (en.ts:515) is the longest amount label and exceeds the column width — because the header text has no width constraint or flexShrink, it overflows/does not stay flush-right, so it no longer visually lines up with the right-aligned value below it.

Why it's not the shared alignment helper

ORIGINAL_AMOUNT (the internal name for the "Purchase amount" column; search token purchase-amount) is already grouped with TOTAL_AMOUNT/TOTAL in getReportTableColumnStyles, so both its header container and value cell get styles.alignItemsEnd — and this was already true on the reported build 9.4.33-0. So this is not a missing alignItemsEnd. The remaining gap is purely the header label overflowing its fixed narrow column because — unlike the value Text — it has no textAlignRight, no width bound, and no flexShrink (contrast the reimbursable/billable headers, which do get styles.flexShrink1 at SortableTableHeader.tsx:83-86).

Proposed Fix

Give amount-column headers the same right-alignment guarantee the value cell has. In SortableTableHeader.tsx, pass a textStyle that keeps the label flush-right and bounded for amount columns (e.g. styles.textAlignRight + styles.flexShrink1) so a long label truncates/right-aligns instead of drifting left. This mirrors the value cell and stays consistent with the existing per-column textStyle handling.

What I could not confirm

I verified the code asymmetry statically but did not reproduce it live. Before implementing, a quick visual check (add "Purchase amount" via Display → Edit Columns on a wide/desktop layout) would confirm the label-overflow mechanism versus a width mismatch.

Confidence: Medium — the header/value alignment asymmetry is verified in code; the exact visual trigger (long-label overflow) is inferred, not reproduced.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/95874) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[MobileMage]

Proposal

Please re-state the problem that we are trying to solve in this issue.

In the Search table (Spend > Expenses), after adding the "Purchase amount" column via Display > Edit columns, the numeric amount value in that column is pinned to the right of the cell while the "Purchase amount" header label sits on the left. The header and its value don't line up, unlike the standard "Amount" column where both coincide on the right.

What is the root cause of that problem?

This is a layout bug, not a data bug — both the header and the value are already told to right-align, but they use two different mechanisms and only one of them survives when the label is long. getReportTableColumnStyles puts ORIGINAL_AMOUNT in the same group as TOTAL_AMOUNT/TOTAL, so the header column container and the value cell container both receive styles.alignItemsEnd (a container-level, cross-axis right alignment). The value cell then goes one step further and also sets a text-level styles.textAlignRight on its Text, so the amount stays right-aligned no matter how wide or narrow the cell is. The header does not.

The header text is rendered by SortableHeaderText, whose Text only gets [styles.textMicroSupporting, activeColumnStyle, textStyle] — with no text alignment:

App/src/components/Search/SortableHeaderText.tsx

Lines 101 to 104 in eff37fa

	<Text
	numberOfLines={1}
	style={[styles.textMicroSupporting, activeColumnStyle, textStyle]}
	>

The textStyle it receives is built in SortableTableHeader (lines 82-86) and only ever adds getTextOverflowStyle('clip') for the receipt column and flexShrink1 for reimbursable/billable — it never adds a right text-align for the amount columns. So the header's right alignment comes purely from the container alignItemsEnd, which only visually pushes the label right while the label is narrower than the column. Short amount labels ("Amount", "Total", "Tax") always fit, get shoved to the right edge, and coincide with their right-aligned values. "Purchase amount" is by far the longest amount-column label; in the crowded flat Expenses table the flex-shared amount columns shrink toward their base width (w96), the label fills the column and truncates at numberOfLines={1}, and a filled single-line Text with no textAlign defaults to left. The value keeps its explicit textAlignRight:

App/src/components/Search/SearchList/ListItem/TotalCell.tsx

Lines 21 to 25 in eff37fa

	<TextWithTooltip
	testID="TotalCell"
	shouldShowTooltip
	text={displayText}
	style={[styles.optionDisplayName, styles.pre, styles.justifyContentCenter, styles.textBold, styles.textAlignRight, styles.fontWeightNormal]}

So the header reads left while the value stays right — exactly the mismatch reported, and exactly why only the long "Purchase amount" column shows it while the short "Amount" column looks fine. (PR #95475, cited as the regression source, only renamed the original-amount search token to purchase-amount and never touched alignment; this is a pre-existing gap in the original-amount column feature.)

I reproduced this by adding the Purchase amount column to the Expenses table alongside the existing Amount column, using a real expense row. Both cells rendered the correct value and no errors appeared in the console, so the underlying data and state were fine. The visual bug still showed up: the Purchase amount header renders flush left while its value cell renders flush right, so the two never line up. The default Amount column only looks aligned because its label is short enough that the column's right-anchored container pushes it into the same spot as the value, which coincidentally hides the same underlying mismatch. Neither SortableHeaderText nor SortableTableHeader ever apply right text alignment to the header label, only the container's alignItemsEnd shifts it, while TotalCell.tsx explicitly sets textAlignRight on the value. Because getReportTableColumnStyles groups the Purchase amount column with the other amount columns under that same alignItemsEnd styling, a header wide enough to fill the column exposes the missing text alignment instead of being masked by the container shove. That confirms the defect sits in the styling path that assigns alignment to headers versus values, not in the data being rendered.

What changes do you think we should make in order to solve the problem?

Give the header text the same explicit right alignment the value cell already has, so it aligns right even when the label fills the column. In SortableTableHeader (the textStyle array at lines 82-86), append styles.textAlignRight for the amount/total columns that already receive alignItemsEnd from getReportTableColumnStyles:

const isRightAlignedColumn =
    columnName === CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT ||
    columnName === CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT ||
    columnName === CONST.SEARCH.TABLE_COLUMNS.TOTAL ||
    columnName === CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT ||
    columnName === CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE_TOTAL ||
    columnName === CONST.SEARCH.TABLE_COLUMNS.NON_REIMBURSABLE_TOTAL ||
    columnName === CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL ||
    columnName === CONST.SEARCH.TABLE_COLUMNS.TOTAL_PER_ATTENDEE;
const textStyle = [
    columnName === CONST.SEARCH.TABLE_COLUMNS.RECEIPT ? StyleUtils.getTextOverflowStyle('clip') : null,
    isReimbursableOrBillableColumn ? styles.flexShrink1 : null,
    isRightAlignedColumn ? styles.textAlignRight : null,
];

App/src/components/Search/SortableTableHeader.tsx

Lines 82 to 86 in eff37fa

	const isReimbursableOrBillableColumn = columnName === CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE || columnName === CONST.SEARCH.TABLE_COLUMNS.BILLABLE;
	const textStyle = [
	columnName === CONST.SEARCH.TABLE_COLUMNS.RECEIPT ? StyleUtils.getTextOverflowStyle('clip') : null,
	isReimbursableOrBillableColumn ? styles.flexShrink1 : null,
	];

This is safe: for short amount labels the Text is content-sized and already pushed to the right by alignItemsEnd, so textAlign: right is a visual no-op and nothing about "Amount"/"Total" changes. It only takes effect when the label fills/truncates the column, which is precisely the "Purchase amount" case. It touches no non-amount column, and it proactively fixes the same latent problem for the equally long "Reimbursable total" / "Non-reimbursable total" headers in the expense-report view.

What alternative solutions did you explore? (Optional)

Left-aligning the value to match the currently-left header (the reporter's suggested "Expected") — rejected because it breaks the app-wide convention that monetary amounts are right-aligned and would misalign "Purchase amount" against every other amount column. I also considered widening the amount column so the label always fits and alignItemsEnd suffices, but that fights the fixed column-width system and would still regress for longer localized labels.

[yusufdeveloper2903]

Proposal

Please re-state the problem that we are trying to solve in this issue.

In the Expenses table (Spend > Expenses), after adding the Purchase Amount column, the amount value is anchored to the right edge of its column while the "Purchase Amount" header label is anchored to the left edge, so the value no longer sits under its column name.

What is the root cause of that problem?

The Purchase Amount column (ORIGINAL_AMOUNT) is grouped with the other money columns in getReportTableColumnStyles, so both its header cell and its value cell get styles.alignItemsEnd (right-aligned) on a fairly narrow base width (w96):

https://github.com/Expensify/App/blob/main/src/styles/utils/index.ts#L1944-L1952

The value cell renders TotalCell, whose text is explicitly textAlignRight, so the amount always hugs the right edge:

https://github.com/Expensify/App/blob/main/src/components/Search/SearchList/ListItem/TotalCell.tsx#L20-L26

The header, however, relies only on the container's alignItemsEnd to push the label to the right — the header Text itself has no textAlign:

https://github.com/Expensify/App/blob/main/src/components/Search/SortableHeaderText.tsx#L62-L69

alignItemsEnd only right-positions the label while it is narrower than the column. "Purchase Amount" is a long two-word label that fills (and with numberOfLines={1} is clipped to) the width of its narrow amount column. Once the label's inner row spans the full column width, alignItemsEnd has nothing left to push, and with no textAlign: right on the Text the characters stay anchored to the left. Short money labels like "Amount"/"Total" never fill the column, which is why only Purchase Amount looks misaligned.

The header text style is built here, and today it has no right-align branch for the money columns:

https://github.com/Expensify/App/blob/main/src/components/Search/SortableTableHeader.tsx#L82-L86

What changes do you think we should make in order to solve the problem?

Give the header text of the right-aligned money columns an explicit textAlign: right, so the label lines up with the right-aligned value whether it fits or gets clipped. In SortableTableHeader:

     const isReimbursableOrBillableColumn = columnName === CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE || columnName === CONST.SEARCH.TABLE_COLUMNS.BILLABLE;
+    const isRightAlignedAmountColumn = (
+        [
+            CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT,
+            CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT,
+            CONST.SEARCH.TABLE_COLUMNS.TOTAL,
+            CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL,
+            CONST.SEARCH.TABLE_COLUMNS.TOTAL_PER_ATTENDEE,
+            CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE_TOTAL,
+            CONST.SEARCH.TABLE_COLUMNS.NON_REIMBURSABLE_TOTAL,
+            CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT,
+        ] as SearchColumnType[]
+    ).includes(columnName);
     const textStyle = [
         columnName === CONST.SEARCH.TABLE_COLUMNS.RECEIPT ? StyleUtils.getTextOverflowStyle('clip') : null,
         isReimbursableOrBillableColumn ? styles.flexShrink1 : null,
+        isRightAlignedAmountColumn ? styles.textAlignRight : null,
     ];

When the label is short, alignItemsEnd already right-positions it and textAlignRight is a no-op; when the label fills/clips the column, textAlignRight keeps its right edge aligned with the value below it.

To keep this list from drifting out of sync with getReportTableColumnStyles, I'd extract the set of right-aligned money columns into a single shared constant (e.g. in CONST.SEARCH) and reference it from both the style util's alignItemsEnd case and the header, so the header and cell can never disagree about which columns are right-aligned.

What alternative solutions did you explore? (Optional)

• Widen the amount column so "Purchase Amount" always fits. Rejected — it's fragile (breaks again for a longer label or a longer translation) and wastes horizontal space.
• Right-align inside SortableHeaderText unconditionally (e.g. make the inner row flex1 + justifyContentEnd). Rejected — that component renders every column, so it would wrongly right-align left-aligned headers; the decision must stay per-column in SortableTableHeader.

[aswin-s]

Please re-state the problem that we are trying to solve in this issue.

On Web (staging.new.expensify.com), after adding the "Purchase Amount" column to Spend > Expenses via Display > Edit Columns, the amount value in that column is rendered right-aligned while the "Purchase Amount" header label appears left-aligned, so the numeric value does not sit under its header text. Expected: both the amount value and the header label should be left-aligned so they share the same horizontal alignment.

What is the root cause of that problem?

In src/styles/utils/index.ts:1946-1951, CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT is placed in the same switch case as TOTAL_AMOUNT/REIMBURSABLE_TOTAL/etc., which returns {...getWidthStyle(isAmountColumnWide ? w130 : w96), ...(!shouldRemoveTotalColumnFlex && flex1), ...alignItemsEnd}. Both the header (SortableTableHeader at src/components/Search/SortableTableHeader.tsx:99 passing containerStyle={StyleUtils.getReportTableColumnStyles(columnName, …)}) and the cell share this style, so both inherit alignItemsEnd (right-alignment).

This is correct for total/reimbursable amounts — those columns are monetary and conventionally right-aligned, with their header labels also right-aligned to match. But ORIGINAL_AMOUNT represents the "Purchase Amount" field, whose header label is rendered left-aligned by default. The alignItemsEnd style applied to ORIGINAL_AMOUNT pushes the numeric value to the right edge of the cell while the header text sits at the left, producing the reported visual mismatch.

isAmountColumnWide is derived from the transaction's total amount (isTransactionAmountTooLong at src/libs/SearchUIUtils.ts:1895-1896), not from the purchase amount field or its label length, so even a wide column does not resolve the left/right alignment conflict between header and cell.

What changes do you think we should make in order to solve the problem?

1. In src/styles/utils/index.ts:1946-1951, split ORIGINAL_AMOUNT out of the shared TOTAL_AMOUNT/REIMBURSABLE_TOTAL switch case and give it its own case that returns alignItemsStart (left-alignment) instead of alignItemsEnd. This makes the cell value left-align to match the header label:

case CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT:
    return {...getWidthStyle(isAmountColumnWide ? w130 : w96), ...(!shouldRemoveTotalColumnFlex && flex1), ...alignItemsStart};

2. In src/components/Search/SearchTableHeader.tsx around line 148-150, ensure the ORIGINAL_AMOUNT column header entry also uses alignItemsStart (or no explicit alignment override) rather than inheriting any right-align style from the amount-column group. If the header currently falls into the same branch as TOTAL_AMOUNT at lines 172-175, move ORIGINAL_AMOUNT to its own branch that omits the right-align flag.

3. Extend isTransactionAmountTooLong (src/libs/SearchUIUtils.ts:1895) or its callers ([src/libs/SearchUIUtils.ts:2216](https://github.com/Expensify/App/blob/eff37fa5b42df751fc8531a47406cfe47d80d81e/src/libs/SearchUIUtils.ts#L2216), 2955, 3017) to also inspect the purchase amount field when ORIGINAL_AMOUNT is present, so shouldShowAmountInWideColumn (and downstream amountColumnSize) correctly sizes the column when the purchase amount value is long — independent of the total amount.

4. Verify MoneyRequestReportTableHeader and TransactionItemRowWide (also consumers of getReportTableColumnStyles) render the updated ORIGINAL_AMOUNT style correctly so the header label and cell value both sit at the left edge of the column.

What alternative solutions did you explore? (Optional)

An alternative would be to keep ORIGINAL_AMOUNT right-aligned (matching monetary convention) and instead force the header label for ORIGINAL_AMOUNT to also right-align by passing a text-alignment style through SortableTableHeader. This would resolve the mismatch without changing the cell alignment. However, the issue explicitly states the expected result is left-alignment ("aligned to the left with the column's name"), so matching the header label's natural left alignment with a left-aligned cell is the correct fix.

[ahmdshrif]

🚨 Edited by proposal-police: This proposal was edited at 2026-07-10 21:40:15 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

After adding the "Purchase Amount" column on Spend > Expenses, the amount value renders right-aligned while the long column name reads as left-anchored, so the value does not line up with the field name. Expected per the issue: the amount should be left-aligned with the column's name.

What is the root cause of that problem?

1. The "Purchase amount" column (ORIGINAL_AMOUNT) was added by PR #77814 already grouped with the money-total columns in getReportTableColumnStyles, so its header/cell containers get alignItemsEnd (right alignment):

   App/src/styles/utils/index.ts

   Lines 1944 to 1951 in eff37fa

   	case CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE_TOTAL:
   	case CONST.SEARCH.TABLE_COLUMNS.NON_REIMBURSABLE_TOTAL:
   	case CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT:
   	case CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT:
   	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};

2. Its cell reuses the shared TotalCell, which hardcodes textAlignRight:

   App/src/components/Search/SearchList/ListItem/TotalCell.tsx

   Line 25 in eff37fa

   style={[styles.optionDisplayName, styles.pre, styles.justifyContentCenter, styles.textBold, styles.textAlignRight, styles.fontWeightNormal]}

   rendered from the ORIGINAL_AMOUNT case in the row:

   App/src/components/TransactionItemRow/TransactionItemRowWide.tsx

   Lines 476 to 487 in eff37fa

   	case CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT:
   	return (
   	<View
   	key={column}
   	style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT, {isAmountColumnWide, shouldRemoveTotalColumnFlex})]}
   	>
   	<AmountCell
   	total={getOriginalAmountForDisplay(transactionItem, isExpenseReport(transactionItem.report))}
   	currency={getOriginalCurrencyForDisplay(transactionItem)}
   	/>
   	</View>
   	);

3. I measured the repro video pixel-exact: the header text spans x1142–1218 and the value x1168–1219 — both are right-aligned flush (a right-aligned header predicts x1143–1219; measured x1142–1218, exact match). So the header is NOT left-aligned today; there is no container/width desync (the header wrapper already reserves the row's trailing chevron via pr8:

   App/src/components/Search/index.tsx

   Lines 1021 to 1023 in eff37fa

   	// Match the rows' trailing arrow spacing so the header columns line up with them.
   	<View style={[!isTask && styles.pr8, styles.flex1]}>
   	<SearchTableHeader

   ).
4. The structural cause is that right alignment was designed for short trailing labels ("Total", "Amount") that sit flush over their values. "Purchase amount" is a long label that fills the whole ~96px column (w96), so it visually anchors at the column's left edge while the shorter value floats to the right edge with a whitespace gap under the label's left half — exactly what the tester circles in the video. The pair reads misaligned even though both are technically right-aligned, and the issue's expected result asks for a left-aligned name/value pair (like Date, Merchant, Category, Tag).

Affected paths (all surfaces that render this column):

• Search/Spend header: config in

  App/src/components/Search/SearchTableHeader.tsx

  Lines 147 to 150 in eff37fa

  	{
  	columnName: CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT,
  	translationKey: 'common.purchaseAmount',
  	},

  , styled via

  App/src/components/Search/SortableTableHeader.tsx

  Lines 98 to 111 in eff37fa

  	containerStyle={[
  	StyleUtils.getReportTableColumnStyles(columnName, {
  	isDateColumnWide: dateColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
  	isSubmittedColumnWide: submittedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
  	isApprovedColumnWide: approvedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
  	isPostedColumnWide: postedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
  	isExportedColumnWide: exportedColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
  	isTaxAmountColumnWide: taxAmountColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
  	isAmountColumnWide: amountColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
  	shouldRemoveTotalColumnFlex,
  	isWithdrawnColumnWide: withdrawnColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE,
  	isActionColumnWide,
  	}),
  	]}

• Report-details table header (same column is offered there):

  App/src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx

  Line 40 in eff37fa

  ...getExpenseHeaders().map((header) => ({

  — shares getExpenseHeaders + SortableTableHeader, so it inherits the same util case.
• Data cell (wide layout, used by flat Search, grouped/expanded Search, and report table): TransactionItemRowWide.tsx#L476-L487 above. The narrow layout does not render this column, and mobile platforms use the narrow layout, which matches the web-only repro.

What changes do you think we should make in order to solve the problem?

Left-align the column name and the value together, at the single convergence point both header and cells read:

1. Give ORIGINAL_AMOUNT its own case in getReportTableColumnStyles (src/styles/utils/index.ts#L1944-L1951), keeping width/flex but dropping the right alignment:

case CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT:
    columnWidth = {...getWidthStyle(isAmountColumnWide ? variables.w130 : variables.w96), ...(!shouldRemoveTotalColumnFlex && styles.flex1)};
    break;

This left-aligns the header on the Spend/Search page AND the report-details table in one place, since both flow through this util.

2. Add an optional shouldAlignLeft prop to TotalCell (default false, so every existing consumer is untouched) that swaps styles.textAlignRight for styles.textAlignLeft, and pass it only from the ORIGINAL_AMOUNT case in TransactionItemRowWide.tsx#L476-L487.

Regression safety in one sentence: TOTAL, TOTAL_AMOUNT, GROUP_TOTAL, TOTAL_PER_ATTENDEE, REIMBURSABLE_TOTAL and NON_REIMBURSABLE_TOTAL keep the existing right-aligned case, and TotalCell's default behavior is unchanged, so the Amount/Total columns render exactly as before.

Why the obvious one-line fix does not work: removing alignItemsEnd alone (step 1 only) actually CREATES the reported bug for real — the cell's View reverts to the default alignItems: 'stretch', the Text inside stretches to the full column width, and TotalCell's hardcoded textAlignRight re-pins the digits to the right edge, so the header goes left while every value stays right. Conversely, patching only the cell text style leaves the container's alignItemsEnd shrink-wrapping the text box against the right edge, so nothing moves. Both halves must change together, and only the shared util case also carries the header.

What alternative solutions did you explore? (Optional)

• Keep right alignment and treat this as by-design: amounts conventionally right-align (Amount, Total, Tax amount all do), and my measurement shows header and value are already flush right. If design prefers this, the issue resolves with no code change — but it contradicts the issue's explicit expected result, so I recommend the left-align fix above and leave this as a design call-out.
• Change TotalCell directly to textAlignLeft: incomplete/regressive — it also renders the Amount, Total and Per-attendee columns, which must stay right-aligned.
• Note for design consistency: TOTAL_PER_ATTENDEE ("Per attendee") has the identical long-label-over-short-value pattern and can get the same treatment in the same two spots if desired.

[samranahm]

Proposal

What is the root cause of that problem?

The "Purchase Amount" column in the search results table displays numerical values with right alignment, while its corresponding column header, "Purchase Amount", is left-aligned. This visual inconsistency occurs because the styling applied to the data cells for this column either defaults to right alignment for numerical data or explicitly sets it.

The SearchUIUtils.ts file is a central utility for handling search-related UI logic, and it is the most probable location for defining the properties and rendering behavior of columns in the search results table. It is likely that within this file, or a module it influences, the column definition for "Purchase Amount" does not explicitly enforce left alignment for its values, leading to the observed right alignment.

https://github.com/Expensify/App/blob/eff37fa5b42df751fc8531a47406cfe47d80d81e/src/libs/SearchUIUtils.ts

What changes do you think we should make in order to solve the problem?

To resolve the alignment mismatch, we need to ensure that the "Purchase Amount" column's values are explicitly left-aligned. This can be achieved by modifying the column definition within SearchUIUtils.ts to apply a textAlign: 'left' style to the rendered amount.

1. Locate and modify the "Purchase Amount" column definition:
   In SearchUIUtils.ts, identify the function responsible for defining the columns of the search results table (e.g., getSearchTableColumnDefinitions or similar). Within this function, find the object corresponding to the "Purchase Amount" column.
   https://github.com/Expensify/App/blob/eff37fa5b42df751fc8531a47406cfe47d80d81e/src/libs/SearchUIUtils.ts

   Modify the cellStyle property of this column definition to explicitly set textAlign to left. If a render function is used for the cell, apply the textAlign: 'left' style to the Text component rendering the amount.

   // Example of inferred change within SearchUIUtils.ts
   // (assuming a structure for column definitions)
   const columnDefinitions = [
       // ... other column definitions
       {
           id: 'purchaseAmount',
           header: 'Purchase Amount',
           // ... existing properties
           cellStyle: {
               // Ensure text alignment is left for the amount values
               textAlign: 'left',
           },
           // Or if a render function is used:
           // render: (item) => (
           //     <Text style={{textAlign: 'left'}}>
           //         {item.amount}
           //     </Text>
           // ),
       },
       // ...
   ];

   This change will ensure that the numerical values displayed under the "Purchase Amount" column are aligned to the left, matching the alignment of the column header and resolving the visual inconsistency.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @suneox (External)

[KJ21-ENG]

🚨 Edited by proposal-police: This proposal was edited at 2026-07-10 21:52:05 UTC.

Proposal

What is the root cause of that problem?

The user-facing "Purchase amount" column is the Search table's ORIGINAL_AMOUNT column.

App/src/components/Search/SearchTableHeader.tsx

Lines 148 to 149 in eff37fa

	columnName: CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT,
	translationKey: 'common.purchaseAmount',

That column is grouped with total-style amount columns in getReportTableColumnStyles, so its header and value wrapper get the fixed amount-column width/flex behavior plus alignItemsEnd.

App/src/styles/utils/index.ts

Lines 1946 to 1951 in eff37fa

	case CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT:
	case CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT:
	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};

The row renderer then formats the ORIGINAL_AMOUNT value through the shared Search-list amount cell.

App/src/components/TransactionItemRow/TransactionItemRowWide.tsx

Lines 476 to 484 in eff37fa

	case CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT:
	return (
	<View
	key={column}
	style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT, {isAmountColumnWide, shouldRemoveTotalColumnFlex})]}
	>
	<AmountCell
	total={getOriginalAmountForDisplay(transactionItem, isExpenseReport(transactionItem.report))}
	currency={getOriginalCurrencyForDisplay(transactionItem)}

That shared amount cell always applies textAlignRight, which is correct for totals but keeps the Purchase amount value anchored to the right edge instead of aligning with the left side of the Purchase amount field name.

App/src/components/Search/SearchList/ListItem/TotalCell.tsx

Lines 15 to 25 in eff37fa

	function TotalCell({total, currency, isScanning = false}: TotalCellProps) {
	const styles = useThemeStyles();
	const {translate} = useLocalize();
	const {convertToDisplayString} = useCurrencyListActions();
	const displayText = isScanning ? translate('iou.receiptStatusTitle') : convertToDisplayString(total, currency);
	return (
	<TextWithTooltip
	testID="TotalCell"
	shouldShowTooltip
	text={displayText}
	style={[styles.optionDisplayName, styles.pre, styles.justifyContentCenter, styles.textBold, styles.textAlignRight, styles.fontWeightNormal]}

What changes do you think we should make in order to solve the problem?

Split CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT out of the total-style amount case in src/styles/utils/index.ts. Keep the same w96 / w130 amount-column width and the existing flex behavior, but do not apply styles.alignItemsEnd for ORIGINAL_AMOUNT. This makes the Purchase amount header and cell wrapper use the same left edge while leaving TOTAL_AMOUNT, TOTAL, GROUP_TOTAL, TOTAL_PER_ATTENDEE, and the reimbursable/non-reimbursable total columns right-aligned.

App/src/styles/utils/index.ts

Lines 1946 to 1951 in eff37fa

	case CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT:
	case CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT:
	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};

Add an optional alignment prop to src/components/Search/SearchList/ListItem/TotalCell.tsx, defaulting to the existing right alignment. Pass the left-alignment option only from the ORIGINAL_AMOUNT branch in TransactionItemRowWide, so Purchase amount opts out while every total-style caller keeps the current right-aligned behavior.

App/src/components/Search/SearchList/ListItem/TotalCell.tsx

Lines 9 to 25 in eff37fa

	type TotalCellProps = {
	total: number;
	currency: string;
	isScanning?: boolean;
	};
	function TotalCell({total, currency, isScanning = false}: TotalCellProps) {
	const styles = useThemeStyles();
	const {translate} = useLocalize();
	const {convertToDisplayString} = useCurrencyListActions();
	const displayText = isScanning ? translate('iou.receiptStatusTitle') : convertToDisplayString(total, currency);
	return (
	<TextWithTooltip
	testID="TotalCell"
	shouldShowTooltip
	text={displayText}
	style={[styles.optionDisplayName, styles.pre, styles.justifyContentCenter, styles.textBold, styles.textAlignRight, styles.fontWeightNormal]}

App/src/components/TransactionItemRow/TransactionItemRowWide.tsx

Lines 476 to 484 in eff37fa

	case CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT:
	return (
	<View
	key={column}
	style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT, {isAmountColumnWide, shouldRemoveTotalColumnFlex})]}
	>
	<AmountCell
	total={getOriginalAmountForDisplay(transactionItem, isExpenseReport(transactionItem.report))}
	currency={getOriginalCurrencyForDisplay(transactionItem)}

Because ORIGINAL_AMOUNT is available in both the Spend/Search column picker and report-details columns, this shared style change should cover both table surfaces instead of only the Spend page.

App/src/CONST/index.ts

Lines 6619 to 6622 in eff37fa

	* - `search`: the Spend/Search picker (`/search` → Display → Edit columns), read via `TYPE_CUSTOM_COLUMNS.EXPENSE`.
	* - `reportView`: the single-report picker (`r/:reportID/settings/columns`), read via `REPORT_DETAILS_CUSTOM_COLUMNS`.
	*
	* Both `TYPE_CUSTOM_COLUMNS.EXPENSE` and `REPORT_DETAILS_CUSTOM_COLUMNS` are derived from this map (preserving

App/src/CONST/index.ts

Line 6652 in eff37fa

ORIGINAL_AMOUNT: {column: this.TABLE_COLUMNS.ORIGINAL_AMOUNT, search: true, reportView: true},

Test coverage:

• Add or update a Search table rendering test for the ORIGINAL_AMOUNT / Purchase amount column and assert that its wrapper and text do not use the right-aligned amount styles.
• Add a regression assertion that another monetary column, such as TOTAL_AMOUNT or grouped TOTAL, still keeps the default right-aligned wrapper and text style.
• Manually verify Spend > Expenses > Display > Edit columns > Purchase amount on wide web and confirm the Purchase amount value starts under the Purchase amount header while total/amount columns remain right-aligned.

What alternative solutions did you explore? (Optional)

One alternative is to keep Purchase amount values right-aligned and instead force the long header label to right-align. I would not choose that because the issue's expected result asks for the value to align left with the field name, and it would keep a short value visually separated from the start of the long "Purchase amount" label.

Another partial option is changing only the shared amount cell text style. That is not enough because the ORIGINAL_AMOUNT wrapper would still be positioned by getReportTableColumnStyles with alignItemsEnd, so the cell can remain anchored to the right edge even if the text itself no longer uses textAlignRight.

App/src/styles/utils/index.ts

Lines 1946 to 1951 in eff37fa

	case CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT:
	case CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT:
	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};