Expense - No padding between report header and action buttons

[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.41-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: #90403
Email or phone of affected tester (no customers): sdsjodijnsdojsosjio@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Samsung Galaxy S25 FE / Android 16
App Component: Money Requests

Action Performed:

1. Launch Expensify app.
2. Go to workspace chat.
3. Create an expense.
4. Open the report.

Expected Result:

There will be padding between report header and action buttons.

Actual Result:

There is no padding between report header and action buttons.
Report header avatar touches the Submit button.

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: 7213097

[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/40653940cdb718308dedcf0de8ca73499d667ad610f2f625ed0005efecad2721

[melvin-bot]

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

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

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #90403 - "Standardize Expense Report and Expense header with predictable button placement and carousel counter" by @thelullabyy (High confidence)
Related Issues: #90366 (the issue #90403 fixed)

Recommendation: ROLL FORWARD (targeted fix)

The regression is a single stray negative top margin (styles.mtn1 = marginTop: -4) that #90403 wrapped around the header action buttons in the narrow (App) layout, pulling the buttons up against the report header. A targeted fix is far safer than reverting this 25-file standardization PR (which also adds the carousel counter, navigation, and tests). Reverting would reintroduce the original header inconsistency from #90366 and risk conflicts with dependent PRs.

Assigned: @thelullabyy (PR author), @JS00001 (approving reviewer), @ShridharGoel (approving reviewer) from PR #90403.
Labels: No changes. Kept DeployBlockerCash (App deploy is blocked — this is a frontend App regression). DeployBlocker was not present.

📋 Detailed Analysis

Evidence

• The bug is Android App, staging-only, not reproducible on production — consistent with a recently-merged App PR in the current 9.4.41-0 staging deploy (StagingDeployCash Deploy Checklist: New Expensify 2026-07-21 #96534).
• Melvin auto-assigned Standardize Expense Report and Expense header with predictable button placement and carousel counter #90403 because its author recently merged it; the PR title is literally about header/button placement in the expense & report headers.
• PR Standardize Expense Report and Expense header with predictable button placement and carousel counter #90403 (merged 2026-07-17) is the only PR in this release that touches MoneyReportHeader.tsx, MoneyRequestHeader.tsx, and MoneyReportHeaderMoreContent.tsx (spot-checked other release header-adjacent PRs [No QA] Docs updates for E/A#96351 correct Certinia PSA/SRP install link #96360/Show inline Explain link on integration sync failure messages #96424/docs: link scheduler delegate patch to PR #93878 #96445/Fix: Magic code expired page - 'request one here' does nothing in a fresh tab #96502 etc. — none touch these files).
• The PR diff introduces a new negative-top-margin wrapper <View style={styles.mtn1}> around the action buttons in the narrow layout branch of both headers — exactly the "no padding / avatar touches Submit button" symptom.

Verification

Affected files (still present on main):

• src/components/MoneyReportHeader.tsx:162-170 — action buttons wrapped in <View style={styles.mtn1}> when !shouldShowHeaderButtonsInHeaderRow (the narrow/App path).
• src/components/MoneyRequestHeader.tsx:197-204 — same styles.mtn1 wrapper when shouldDisplayButtonsInSeparateLine.
• src/components/MoneyReportHeaderMoreContent.tsx:104 — styles.mtn1 also added to the status/more-content row.

The negative margin resolves to:

// src/styles/utils/spacing.ts:354-356
mtn1: {
    marginTop: -4,
},

gh pr view 90403 --json files confirms all three components are in the PR's changed file list, and gh pr diff 90403 shows the + <View style={styles.mtn1}> additions wrapping MoneyReportHeaderActions / MoneyRequestHeaderActions.

Root Cause

When the header buttons render on a separate line (narrow/App layout), #90403 wrapped the action-buttons row in a container with marginTop: -4. This negative offset pulls the buttons up into the report header, eliminating the intended gap so the header avatar visually touches the Submit button. On wider layouts the buttons render inside the header row, so the offset is not applied — which is why this only surfaces on the App (narrow) layout.

Suggested targeted fix

Remove (or reduce) the styles.mtn1 negative margin on the narrow-layout action-button wrappers in MoneyReportHeader.tsx and MoneyRequestHeader.tsx (and re-check MoneyReportHeaderMoreContent.tsx) so the intended spacing between the header and the action buttons is preserved. The author/reviewers should confirm the wide-layout (RHP/landscape) spacing that mtn1 was originally tuning still looks correct after the change.