[Due for payment 2026-03-30] Web - Reports - Reimbursable title is truncated when sorted by Reimbursable

[lanitochka17]

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.40-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #83124
Email or phone of affected tester (no customers): sjdoisjndoisjndjnoisj@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.2 / Chrome
App Component: Search

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Reports > Expenses.
3. Click Columns.
4. Select Reimbursable and click Apply.
5. Click Reimbursable title on the table header.

Expected Result:

Reimbursable title will not be truncated when sorted by Reimbursable.

Actual Result:

Reimbursable title is truncated when sorted by Reimbursable.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7106241_1773840341212.7.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @hungvu193

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #83124

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[JS00001]

@hungvu193 @twilight2294

[OSBotify]

Investigation Summary

Classification: Frontend bug
Causing PR: #83124 - "Fix: "Reimbursable" column width is wider than necessary on report page" by @twilight2294 (High confidence)
Related Issues: #82667 (original issue that PR 83124 was fixing)

Recommendation: ROLL FORWARD

The fix should adjust the column width to accommodate both the text and the sort indicator icon. The PR reduced the width from 92px to 80px, which is too narrow when the sort indicator (12px icon + gap) is visible.

Labels: No label changes needed - keeping DeployBlockerCash since this is a frontend bug caused by an App PR.

Detailed Analysis

Evidence

PR #83124 was intended to fix issue #82667, which reported that the "Reimbursable" column was wider than necessary. The PR successfully reduced the column width from 92px to 80px by modifying:

• src/styles/utils/index.ts (line 1864): Changed from variables.w92 to variables.w80
• src/libs/SearchUIUtils.ts (line 4616): Changed minWidth from 92 to 80

Verification

The bug affects the Reimbursable column in the search table:

• Affected files:
  • /home/runner/_work/App/App/src/styles/utils/index.ts - defines column width styles
  • /home/runner/_work/App/App/src/libs/SearchUIUtils.ts - calculates minimum table width
  • /home/runner/_work/App/App/src/components/SelectionListWithSections/SortableHeaderText.tsx - renders sortable headers with icons

PR #83124 modifies the first two files, directly impacting the Reimbursable column width.

Root Cause

The SortableHeaderText component renders:

1. The column text "Reimbursable" with numberOfLines={1} (causes truncation)
2. A sort arrow icon (12px width) when the column is sorted/active
3. Gap spacing between elements (styles.gap1)

When unsorted, 80px is sufficient for just the text. However, when sorted, the sort indicator icon (12px) plus gap reduces available text space to approximately 64-66px, which is insufficient for the word "Reimbursable" (approximately 13 characters), causing truncation.

The original 92px width provided enough space for text + icon + gap, but was deemed "wider than necessary" for the unsorted state. The solution needs to balance both states - a value between 80-92px, or ideally around 88-90px, should accommodate the sorted state without being excessive in the unsorted state.