Repository navigation
[Due for payment 2026-07-29] Expense - More menu slightly covers action buttons, no padding at the bottom #96548
Description
Activity
While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/ddb62a700de3ba7235c4d7c2c05d2602a2f6dd856d3b4946e6aff78b8f33b66cYou have been assigned to this deploy blocker because you recently merged this PR: #90403
💬 A slack conversation has been started in #expensify-open-source
👋 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:
- Identify the pull request that introduced this issue and revert it.
- Find someone who can quickly fix the issue.
- Fix the issue yourself.
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,
isDuplicatebecomes true and the "Review duplicates" status bar renders, which flips the header into the status-bar branch. That branch addsstyles.mtn1(marginTop: -4) to both the separate-line actions row and the status-bar row, and the separate-line actions wrapper no longer carriesstyles.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.mtn1pulls the rows up by 4px so they overlap the row above. The More (⋯) button is aButtonWithDropdownMenuwhose popover anchors to the button's live Y position withvertical: 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 hasstyles.mtn1only, so the guaranteed 12px bottom padding is gone.
Recommended Fix
- Remove
styles.mtn1from the status-bar row (line 206) and the separate-line actions wrapper (line 198) to stop the row overlap. - Restore bottom padding on the separate-line actions wrapper — add
styles.pb3to line 198.
If the
mtn1was 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 atMoneyRequestHeaderSecondaryActions.tsx:587. isDuplicate→statusBarProps:MoneyRequestHeader.tsx:95and 124-126.- Only the wide/separate-line branch of
MoneyRequestHeaderActions.tsxsuppliespb3; when actions are gated into the status-bar row on desktop they use the branch withoutpb3. mtn1 = marginTop: -4,pb3 = paddingBottom: 12(src/styles/utils/spacing.ts).- The equivalent report-level layout in
MoneyReportHeaderMoreContent.tsxwraps content in[..., styles.pb3, styles.mtn1, shouldShowNextStep && styles.pt0]— samemtn1pattern, 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.- "More menu covers the action buttons" —
@MelvinBot Please implement PR
Reacted by melvin-bot🤖 Draft PR created: #96555
This reverts the
styles.mtn1(marginTop: -4) negative margins that #90403 added to the separate-line actions wrapper and the status-bar row inMoneyRequestHeader.tsx, which were pulling the rows up so the More menu overlapped the action buttons and ate the bottom padding. The pre-PR[ph5, pb3]spacing on the status-bar row is restored, and the new inline actions-next-to-status-bar behavior is kept.Static checks pass locally (oxfmt, lint, tsc). Since this is a layout/CSS change, please visually verify the repro (workspace chat → create expense → open report → More > Duplicate → click More) before marking it as "Ready for review".
⚠️ Looks like this issue was linked to a Deploy Blocker hereIf you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.
If a regression has occurred and you are the assigned CM follow the instructions here.
If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.
3 remaining items
This issue was fixed by the revert in #96636. @Expensify/applauseleads please retest.
- changed the title
[-]Expense - More menu slightly covers action buttons, no padding at the bottom[/-][+][Due for payment 2026-07-29] Expense - More menu slightly covers action buttons, no padding at the bottom[/+]on Jul 22, 2026 Reviewinglabel has been removed, please complete the "BugZero Checklist".The solution for this issue has been 🚀 deployed to production 🚀 in version 9.4.41-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:
If no regressions arise, payment will be issued on 2026-07-29. 🎊
@JS00001 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]. If no checklist is needed for this issue, you can click: [no checklist button]
@JS00001 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]. If no checklist is needed for this issue, you can click: [no checklist button]
Metadata
Metadata
Assignees
Type
Projects
- Status
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:
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:
Screenshots/Videos
Bug7213079_1784597529032.2.mp4
View all open jobs on GitHub