[$250] Extra padding/margin to the right of "More" button when viewing expense on web/desktop

[m-natarajan]

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.38-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Navigate to any Reports > expense on web/desktop
2. Locate the "More" button (typically in the expense header or action bar)
3. Observe the spacing to the right of the "More" button.

Expected Result:

The "More" button should have proper, consistent spacing with no excess padding or margin on the right side, aligning cleanly with surrounding elements.

Actual Result:

Extra padding and/or margin appears to the right of the "More" button

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• 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

Issue Owner

Current Issue Owner: @hoangzinh

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022033532889081182108
• Upwork Job ID: 2033532889081182108
• Last Price Increase: 2026-03-16

[shawnborton]

@MelvinBot can you try to track down where the regression was introduced that caused this to happen?

[MelvinBot]

Proposal

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

When viewing an expense report on web/desktop, there is extra padding/margin to the right of the "More" button in the header. This creates a noticeable gap between the "More" button and the adjacent Search/Help icons.

What is the root cause of that problem?

In HeaderWithBackButton/index.tsx, the View wrapping children at line 273 always applies styles.pr2 (paddingRight: 8px):

<View style={[styles.pr2, styles.flexRow, styles.alignItemsCenter]}>
    {children}
    {shouldShowDownloadButton && ...}
    {shouldShowRotateButton && ...}
    {shouldShowPinButton && ...}
</View>
{ThreeDotMenuButton}
{shouldShowCloseButton && ...}

This pr2 padding was designed to create spacing between the action buttons (children, download, rotate, pin) and the ThreeDotMenuButton/CloseButton that sit immediately after this View. However, both MoneyRequestHeader (line 649) and MoneyReportHeader (line 2314) do not pass shouldShowThreeDotsButton to HeaderWithBackButton (it defaults to false), and neither passes shouldShowCloseButton. As a result, ThreeDotMenuButton resolves to null (line 163-195), and the pr2 paddingRight creates an unnecessary 8px gap to the right of the "More" button with nothing to separate it from.

The layout on desktop becomes: [Avatar/Title] [8px marginLeft] [children ("More" btn)] [8px paddingRight ← unnecessary] [SearchButton] [SidePanelButton] [12px marginRight]

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

Make the pr2 padding conditional based on whether ThreeDotMenuButton or CloseButton is actually rendered. In HeaderWithBackButton/index.tsx at line 273, change:

<View style={[styles.pr2, styles.flexRow, styles.alignItemsCenter]}>

to:

<View style={[shouldShowThreeDotsButton || shouldShowCloseButton ? styles.pr2 : undefined, styles.flexRow, styles.alignItemsCenter]}>

This removes the 8px right padding when there is no ThreeDotsMenu or CloseButton to separate from, while preserving it for cases that need the spacing (e.g., attachment previews with download/rotate buttons followed by a ThreeDotsMenu).

What alternative solutions did you explore? (Optional)

1. Removing pr2 entirely — This would break spacing for views that actually use ThreeDotsMenu alongside children (like workspace settings pages).
2. Adding negative margin on MoneyRequestHeader/MoneyReportHeader children — This is a workaround that doesn't address the root cause and creates maintenance burden.
3. Using gap on the reportOptions View instead of pr2 — This would require restructuring the flex container and could have wider impact across all HeaderWithBackButton consumers.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @hoangzinh (External)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022033532889081182108

[MelvinBot]

Regression Tracking

I traced the git history of the relevant files and identified two PRs that together created this issue:

Primary Regression: PR #58474 — "Help button spacing and alignment"

• Merged: March 19, 2025 by francoisl
• Author: 289Adam289

This PR restructured the layout of HeaderWithBackButton/index.tsx. Specifically, commit 1fed0203f4 (March 18, 2025) split the reportOptions container into two nested Views:

Before PR #58474:

<View style={[styles.reportOptions, styles.flexRow, styles.pr5, styles.alignItemsCenter]}>
    {children}
    {shouldShowDownloadButton && ...}
    {shouldShowPinButton && ...}
    {shouldShowThreeDotsButton && ...}
    {shouldShowCloseButton && ...}
</View>

After PR #58474:

<View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
    <View style={[styles.pr2, styles.flexRow, styles.alignItemsCenter]}>
        {children}
        {shouldShowDownloadButton && ...}
        {shouldShowPinButton && ...}
    </View>
    {ThreeDotMenuButton}
    {shouldShowCloseButton && ...}
</View>

The inner pr2 View (paddingRight: 8px) was introduced to separate children/download/pin buttons from the ThreeDotsMenu and CloseButton. However, this padding applies unconditionally, even when ThreeDotsMenu and CloseButton don't render.

Contributing Change: PR #58084 — "Simplified actions on report header"

• Merged: April 8, 2025
• Author: jnowakow

This PR introduced the "More" ButtonWithDropdownMenu as children of HeaderWithBackButton in both MoneyReportHeader and MoneyRequestHeader. This made the pr2 gap significantly more visible, since now there's a prominent button sitting inside the pr2 container with 8px of unexplained right padding.

Earlier Context: PR #44025 — "[Details Revamp] Remove the Three Dot Menu on Affected Reports"

• Merged: July 5, 2024
• Author: cdOut

This earlier PR removed shouldShowThreeDotsButton from both MoneyReportHeader and MoneyRequestHeader, which means the ThreeDotsMenu in HeaderWithBackButton renders as null for these headers. This is why the pr2 padding serves no purpose — there's nothing after the inner View to separate from.

Timeline

Date	PR	What happened
July 5, 2024	#44025	Removed shouldShowThreeDotsButton from MoneyReportHeader/MoneyRequestHeader
March 19, 2025	#58474	Introduced inner <View style={[styles.pr2]}> wrapping children — the regression point
April 8, 2025	#58084	Added "More" button as children, making the gap visually prominent

PR #58474 is the primary regression since it introduced the structural change that created the unconditional padding. PR #58084 made it clearly visible by adding the "More" button as a child element.

[shawnborton]

@MelvinBot implement this please

[MelvinBot]

🤖 Draft PR created: #85418
Please mark it as "Ready for review" when it is ready for review.