[CP Staging] Fix: Reimbursable title is truncated when sorted by Reimbursable#85668
[CP Staging] Fix: Reimbursable title is truncated when sorted by Reimbursable#85668JS00001 merged 4 commits intoExpensify:mainfrom
Conversation
|
@hungvu193 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
melvin-bot
bot
requested review from
JmillsExpensify
and removed request for
a team
twilight2294
changed the title
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
src/styles/utils/index.ts
Outdated
| case CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE: | ||
| case CONST.SEARCH.TABLE_COLUMNS.BILLABLE: | ||
| columnWidth = {...getWidthStyle(variables.w80)}; | ||
| columnWidth = {...getWidthStyle(isActive ? variables.w92 : variables.w80)}; |
There was a problem hiding this comment.
❌ CONSISTENCY-3 (docs)
getReportTableColumnStyles is a shared utility called by both the header (SortableTableHeader.tsx) and data rows (TransactionItemRow/index.tsx). The header now passes isActive (line 93 of SortableTableHeader.tsx), but the data row callers at TransactionItemRow/index.tsx:391 and :400 do not pass isActive, so it defaults to false. This means when sorting by Reimbursable or Billable:
- Header column:
w92(92px) becauseisActive = true - Data row column:
w80(80px) becauseisActivedefaults tofalse
This 12px width mismatch between the header and data columns will cause visual misalignment. The REIMBURSABLE/BILLABLE columns do not use flex1, so there is no flex mechanism to absorb this difference.
The existing pattern for other dynamic-width columns (DATE, SUBMITTED, APPROVED, POSTED, EXPORTED) ensures both the header and data rows pass the same isWide boolean. This change should follow the same pattern.
Suggested fix: Instead of conditionally widening only the header, always use w92 for both header and data rows:
case CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE:
case CONST.SEARCH.TABLE_COLUMNS.BILLABLE:
columnWidth = {...getWidthStyle(variables.w92)};
break;This avoids the mismatch entirely and gives the column enough room for the header text regardless of sort state.
Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
There was a problem hiding this comment.
@shawnborton So we have an issue with the width 80 of the reibursable column if the column has an active sort. We decided to add a check here so we will keep the width 92 if the sort is active and otherwise revert the width to 80. However, we will see the UI jumping for the first time when the sort is enabled. What do you think about this approach?
Screen.Recording.2026-03-18.at.22.16.41.mov
There was a problem hiding this comment.
Honestly I think the best solution is not to use conditional widths here. Just use a width that works well in all cases, whether it's actively sorted or not. We don't want the table jumping.
There was a problem hiding this comment.
I updated:
Screen.Recording.2026-03-18.at.9.27.22.PM.mov
There was a problem hiding this comment.
That feels better to me!
There was a problem hiding this comment.
@twilight2294 I'll go ahead and approve it for now. But we still need to resolve this width issue for ReportScreen's reimbursable case.
|
Works good: Screen.Recording.2026-03-18.at.8.55.20.PM.mov |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 809cbc24f0
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
|
Please don't merge this, it's not working well. You can't just change the width of the table header column, you need to also change the width of the column in the table body. Otherwise they don't line up and it's shifted. |
|
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppAndroid: mWeb ChromeiOS: HybridAppiOS: mWeb SafariMacOS: Chrome / Safari |
[CP Staging] Fix: Reimbursable title is truncated when sorted by Reimbursable (cherry picked from commit 146ddbb) (cherry-picked to staging by cristipaval)
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚧 @JS00001 has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
🚀 Cherry-picked to staging by https://github.com/cristipaval in version: 9.3.40-1 🚀
|
|
🚀 Cherry-picked to staging by https://github.com/cristipaval in version: 9.3.41-0 🚀
Bundle Size Analysis (Sentry): |
|
🚀 Deployed to production by https://github.com/cristipaval in version: 9.3.41-4 🚀
|
5 participants
Explanation of Change
The
Reimbursablecolumn header text gets truncated when sorted because the sort arrow icon takes extra space. The column width is fixed at 80px which isn't enough when the sort indicator is visible.Pass
isActivetogetReportTableColumnStylesso theREIMBURSABLE/BILLABLEcolumns usew92(92px) when actively sorted andw80(80px) otherwise.Fixed Issues
$ #85655
PROPOSAL: N/A
Tests
Offline tests
QA Steps
Verify that Reimbursable title will not be truncated when sorted by Reimbursable.
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screen.Recording.2026-03-18.at.8.55.20.PM.mov