[Due for payment 2026-03-30] [$125] “Reimbursable” column width is wider than necessary on report page

[m-natarajan]

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.3.20-5
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Open a report with multiple expenses
2. View the expense table
3. Observe the width of the Reimbursable column

Expected Result:

The Reimbursable column should use a fixed width.
Width should be just wide enough to comfortably fit the word “Reimbursable” (header) and values “Yes” / “No”.
The column should not occupy unnecessary horizontal space.

Actual Result:

The Reimbursable column is wider than needed.
It consumes more horizontal space than its content requires.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[twilight2294]

Proposal

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

The "Reimbursable" (and "Billable") column on the report page is wider than necessary — it uses a fixed width of 92px, which is more space than required to display the column header text or the "Yes"/"No" cell values, wasting horizontal space on the report table.

What is the root cause of that problem?

The root cause is in the getReportTableColumnStyles function in src/styles/utils/index.ts (lines 1812–1814), where both the REIMBURSABLE and BILLABLE columns are assigned a fixed width of variables.w92 (92px):

case CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE:
case CONST.SEARCH.TABLE_COLUMNS.BILLABLE:
    columnWidth = {...getWidthStyle(variables.w92)};
    break;

This fixed width is applied to both the table header cell in src/components/SelectionListWithSections/SortableTableHeader.tsx (lines 82–93) and the transaction row cell in src/components/TransactionItemRow/index.tsx (lines 381–388), both of which call StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE).

92px is larger than necessary for columns whose content is limited to the header label "Reimbursable"/"Billable" and the cell values "Yes" or "No". For comparison, date columns (Submitted, Approved, Posted, Exported) already use variables.w72 (72px) in their narrow state and render comfortably at that width.

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

Change the width of the REIMBURSABLE and BILLABLE columns from variables.w92 to variables.w72 in src/styles/utils/index.ts (lines 1812–1814):

case CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE:
case CONST.SEARCH.TABLE_COLUMNS.BILLABLE:
    columnWidth = {...getWidthStyle(variables.w72)};
    break;

This reduces the column width from 92px to 72px, reclaiming ~20px of horizontal space per column. The w72 value is already defined in src/styles/variables.ts (line 351) and is a proven width for short-text columns elsewhere in the codebase. After making this change, visual testing across platforms and locales should confirm the header text fits comfortably — if a particular locale's translation of "Reimbursable" is longer, the value can be bumped to w80 (80px), which still improves on the current 92px.

What alternative solutions did you explore? (Optional)

A narrower value such as w60 was considered but may be too tight for the "Reimbursable" header text in some locales. A more flexible approach using flex-based sizing instead of a fixed pixel width was also considered, but staying consistent with the fixed-width pattern used by all other columns in this table is preferable to avoid layout inconsistencies.

[abbasifaizan70]

Proposal

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

When a user opens a report with multiple expenses and views the expense table, the Reimbursable column is wider than needed. It consumes more horizontal space than its content requires (header “Reimbursable” and cell values “Yes” / “No”).

The Reimbursable column is wider than needed and consumes more horizontal space than its content requires.

What is the root cause of that problem?

The Reimbursable (and Billable) column width is set to variables.w92 (92px) in the report table column styles. The same 92 px value is used in getTableMinWidth when computing the minimum table width. This fixed width is larger than necessary for the short header and “Yes”/“No” values, so the column takes more horizontal space than needed.

Relevant behavior (permalink = link to code on main):

• The Reimbursable and Billable columns are assigned a width of variables.w92 (92px) in getReportTableColumnStyles.
  

  App/src/styles/utils/index.ts

  Lines 1811 to 1815 in 0ad75d6

  	break;
  	case CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE:
  	case CONST.SEARCH.TABLE_COLUMNS.BILLABLE:
  	columnWidth = {...getWidthStyle(variables.w92)};
  	break;

• getTableMinWidth adds 92px to the minimum width for each Reimbursable or Billable column, matching the same value.
  

  App/src/libs/SearchUIUtils.ts

  Lines 4576 to 4584 in 0ad75d6

  	} else if (column === CONST.SEARCH.TABLE_COLUMNS.DATE) {
  	minWidth += 48;
  	} else if (column === CONST.SEARCH.TABLE_COLUMNS.SUBMITTED || column === CONST.SEARCH.TABLE_COLUMNS.APPROVED || column === CONST.SEARCH.TABLE_COLUMNS.POSTED) {
  	minWidth += 72;
  	} 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;
  	} else {

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

Use a smaller fixed width for the Reimbursable and Billable columns so the column is just wide enough to fit the header and “Yes”/“No” values. The codebase already defines variables.w80 (80px), which is used for other compact columns (e.g. ACTION). Use variables.w80 (80px) for Reimbursable and Billable in both:

1. Style utils (App/src/styles/utils/index.ts) – In getReportTableColumnStyles, for CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE and CONST.SEARCH.TABLE_COLUMNS.BILLABLE, set the width to variables.w80 instead of variables.w92.

2. SearchUIUtils (App/src/libs/SearchUIUtils.ts) – In getTableMinWidth, when the column is Reimbursable or Billable, add 80 to the minimum width instead of 92 so the table’s minimum width calculation stays in sync with the column width.

Solution – new code (git diff):

--- a/App/src/styles/utils/index.ts
+++ b/App/src/styles/utils/index.ts
@@ -1809,8 +1809,8 @@ const createStyleUtils = (
                 columnWidth = {...getWidthStyle(variables.w20), ...styles.alignItemsCenter};
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE:
             case CONST.SEARCH.TABLE_COLUMNS.BILLABLE:
-                columnWidth = {...getWidthStyle(variables.w92)};
+                columnWidth = {...getWidthStyle(variables.w80)};
                 break;
             case CONST.SEARCH.TABLE_COLUMNS.TAX_RATE:
                 columnWidth = {...getWidthStyle(variables.w92), ...styles.flex1};
--- a/App/src/libs/SearchUIUtils.ts
+++ b/App/src/libs/SearchUIUtils.ts
@@ -4574,7 +4574,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 += 80;
         } else {
             minWidth += 200;
         }

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.