Workspace - Per diem Subrate and Amount column are misaligned for auditor

[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.3.91-0
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #91305
Email or phone of affected tester (no customers): djoijnsdojsoijnsdoijnsij1@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.5 / Chrome
App Component: Workspace Settings

Action Performed:

Precondition:

• User A invites User B to workspace as auditor.
• Workspace has per diem rates.
• Perform steps below as auditor (User B).

1. Go to staging.new.expensify.com
2. Go to workspace settings > Per diem.

Expected Result:

Subrate and Amount column will be aligned correctly for auditor.

Actual Result:

Subrate and Amount column are misaligned for auditor.

Workaround:

Unknown

Platforms:

• 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

Applause Internal Information
Exported by: Mita Rachim
Bug ID: 7169333

[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/f873e0c62cd63e808e162acec462c978ae6504930329386c86f9a92e62a89ed9

[melvin-bot]

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

[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.

[MelvinBot]

Proposal

What is the root cause of that problem?

PR #91305 (read-only workspace access) made the per diem list's right caret conditional — shouldShowRightCaret={canWritePerDiem} — so auditors (who can't write) no longer get the > chevron on each row.

But the custom list header still reserves space for that chevron with a hardcoded styles.mr6 right margin that was not made conditional: WorkspacePerDiemPage.tsx:239.

For an auditor the rows have no caret, so their Subrate/Amount values extend all the way to the right edge, while the header's "Subrate"/"Amount" labels are still pushed left by mr6 → the columns no longer line up.

Evidence chain

• The right caret is an ArrowRight icon of width iconSizeNormal (20px) plus ml2 (8px) ≈ 28px, rendered per-row in BaseListItem.tsx:252-260. The header's mr6 (24px) exists purely to compensate for that caret column so the Amount header sits above the Amount values.
• Before the PR the page was admin-only and shouldShowRightCaret was always true, so mr6 always matched a caret that was always present — no misalignment.
• The PR added canWritePerDiem and gated the caret on it, but left the header mr6 unconditional. The left side stays aligned because the header's checkbox padding (canSelectMultiple && styles.pl3) and the row checkbox are both already gated on canWritePerDiem via canSelectMultiple — only the right margin was missed.
• Sibling pages touched by the same PR don't have this bug: Distance Rates uses the shared CustomListHeader component which takes shouldShowRightCaret as a prop, and Categories/Tags headers have no mr6. Per Diem is the only page with a hand-rolled header carrying a fixed right margin.

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

In getCustomListHeader(), gate the header's right margin on the same condition as the caret — apply styles.mr6 only when canWritePerDiem is true (i.e. canWritePerDiem && styles.mr6 in the header container's style array at WorkspacePerDiemPage.tsx:239). This keeps the header aligned with rows in both states: admins keep mr6 (caret present), auditors drop it (no caret).

What alternative solutions did you explore? (Optional)

Always show the caret to auditors as a non-interactive element — rejected, since the caret implies the row is tappable/editable and auditors have read-only access.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement this to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.