Expense - More menu slightly covers action buttons, no padding at the bottom

[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: Mac 26.5 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Create an expense.
4. Open the report.
5. Click More > Duplicate report.
6. Click More.

Expected Result:

More menu will not cover the action buttons.
There will be padding at the bottom.

Actual Result:

More menu covers the action buttons.
There is no padding at the bottom.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7213079_1784597529032.2.mp4

View all open jobs on GitHub

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

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

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

Proposal

Root Cause

Layout regression introduced by #90403 (Standardize Expense Report and Expense header…, merged Jul 17) in src/components/MoneyRequestHeader.tsx.

After duplicating an expense, isDuplicate becomes true and the "Review duplicates" status bar renders, which flips the header into the status-bar branch. That branch adds styles.mtn1 (marginTop: -4) to both the separate-line actions row and the status-bar row, and the separate-line actions wrapper no longer carries styles.pb3:

{shouldDisplayButtonsInSeparateLine && (
    <View style={styles.mtn1}>            // mtn1 only — no pb3
        <MoneyRequestHeaderActions ... />
    </View>
)}
{!!statusBarProps && (
    <View style={[styles.flexRow, ..., styles.pb3, styles.mtn1]}>  // negative top margin pulls row up
        ...
    </View>
)}

• "More menu covers the action buttons" — styles.mtn1 pulls the rows up by 4px so they overlap the row above. The More (⋯) button is a ButtonWithDropdownMenu whose popover anchors to the button's live Y position with vertical: TOP (opens downward). Pulling the button up drags the opened menu over the adjacent action buttons.
• "No padding at the bottom" — pre-PR the actions/status rows were always wrapped in a [styles.ph5, styles.pb3] container. The new separate-line wrapper at line 198 has styles.mtn1 only, so the guaranteed 12px bottom padding is gone.

Recommended Fix

In MoneyRequestHeader.tsx:

1. Remove styles.mtn1 from the status-bar row (line 206) and the separate-line actions wrapper (line 198) to stop the row overlap.
2. Restore bottom padding on the separate-line actions wrapper — add styles.pb3 to line 198.

If the mtn1 was added intentionally to tighten spacing when no status bar follows, gate it so it only applies when there is no following padded status-bar row, rather than unconditionally on both rows.

Since this is a deploy blocker, reverting #90403 is also a valid fast path if a targeted fix can't be verified quickly.

Investigation details & evidence

• Repro hits the single-expense / transaction-thread header (MoneyRequestHeader.tsx), not the report-level header. "Duplicate" is a transaction secondary action (MoneyRequestHeaderSecondaryActions.tsx) and the "More" button is the dropdown at MoneyRequestHeaderSecondaryActions.tsx:587.
• isDuplicate → statusBarProps: MoneyRequestHeader.tsx:95 and 124-126.
• Only the wide/separate-line branch of MoneyRequestHeaderActions.tsx supplies pb3; when actions are gated into the status-bar row on desktop they use the branch without pb3.
• mtn1 = marginTop: -4, pb3 = paddingBottom: 12 (src/styles/utils/spacing.ts).
• The equivalent report-level layout in MoneyReportHeaderMoreContent.tsx wraps content in [..., styles.pb3, styles.mtn1, shouldShowNextStep && styles.pt0] — same mtn1 pattern, worth checking there too.

Confidence: High — deterministic CSS/layout regression, reproducible in-browser; no production logs needed. The exact pixel overlap depends on whether staging Chrome puts the actions in the mtn1-only wrapper vs. the status-bar row, which a quick browser check can confirm.

---

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

[thelullabyy]

@MelvinBot Please implement PR