Spend - From field in the expanded report does not align with the avatar

[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.7-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: #92067
Email or phone of affected tester (no customers): sdnjsdoijsosidjs@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.5 / Chrome
App Component: Search

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Create an expense.
4. Go to Spend > Reports.
5. Expand the report.

Expected Result:

From field in the expanded report will align correctly.

Actual Result:

From field in the expanded report does not align with the avatar.

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: Svetlana Lazutkina
Bug ID: 7179382

[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/75fcbbfa4adb73f2f35c0c23a1a8f628911334efdf1bd3670a73fa5cd6320a50

[melvin-bot]

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

[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

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

In Spend > Reports, when a report group is expanded on a large/desktop screen, the From column header does not line up horizontally with the avatar in the transaction rows beneath it. This is a regression introduced by Expensify/App#92067 (sticky/expandable group headers).

What is the root cause of that problem?

A left-padding mismatch between the expanded sub-header (column-name row) and the transaction data rows.

• The sub-header wrapper uses pl8 (32px) left padding: GroupHeader.tsx:448 and the equivalent header in TransactionGroupListExpanded.tsx:295.
• The transaction data rows use p3 (12px) left padding: TransactionGroupListExpanded.tsx:365.

This 20px wrapper difference, compounded by the header's AVATAR-column slot + spacer, pushes the From label ~40px to the right of the avatar.

Offset breakdown

From header label = 32 (pl8) + 12 (pl3 spacer added by SortableTableHeader when canSelectMultiple, SearchTableHeader.tsx:574) + 28 (AVATAR slot w28) + 12 (gap3) = 84px

Row avatar = 12 (p3) + 20 (checkbox) + 12 (gap3) = 44px (avatar is the first child of UserInfoCell, no left padding)

Delta ≈ 40px. Only manifests on isLargeScreenWidth (desktop/web), matching the reported Windows: Chrome platform.

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

Change the sub-header wrapper padding from pl8 (32px) to pl3 (12px) so it matches the data rows' p3 left padding, in both places:

• GroupHeader.tsx:448: styles.pl8 → styles.pl3
• TransactionGroupListExpanded.tsx:295: styles.pl8 → styles.pl3

With matching left padding, the AVATAR header slot (28px) + gap lines up over the row's checkbox (20px) + gap, centring the From label over the avatar. The exact value may need a small tweak after visual verification.

What alternative solutions did you explore?

Keep pl8 on the wrapper but drop the AVATAR pseudo-column from subHeaderColumns so the From label becomes the first cell — this aligns the offsets differently and may be preferable if the AVATAR slot in the sub-header was unintended. Worth confirming the intended header layout with the PR author (Krishna2323) before settling on pl8 → pl3 vs. removing the AVATAR column.

---

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