Wallet - Default badge is close to 3-dot menu

[mitarachim]

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.62-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: #86646
Email or phone of affected tester (no customers): applausetester+khcategory19@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.2 / Chrome
App Component: User Settings

Action Performed:

Precondition:

• Workspace has business bank account.
• Add personal bank account in Account > Wallet.

1. Go to staging.new.expensify.com
2. Go to Account > Wallet.

Expected Result:

The spacing between Default badge and 3-dot menu will be similar to production.

Actual Result:

Default badge is close to 3-dot menu.

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

[melvin-bot]

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

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

[OSBotify]

Investigation Summary

Classification: Frontend bug
Causing PR: #86646 - "fix: RBR is not close to chevron" by @daledah (High confidence)
Related Issues: #86561

Recommendation: REVERT

PR #86646 introduced a layout regression in MenuItem.tsx that directly causes the reported spacing issue between the "Default" badge and the 3-dot menu in the Wallet page. Reverting this PR will restore the correct spacing.

Assigned: @daledah (PR author), @inimaga (approving reviewer)
Labels: DeployBlockerCash kept (frontend App PR caused the issue). DeployBlocker is not present.

Detailed Analysis

Evidence

• melvin-bot already flagged PR fix: RBR is not close to chevron #86646 as the causing PR in the first comment on this issue.
• The bug is staging-only (not reproducible in production), version 9.3.62-0. PR fix: RBR is not close to chevron #86646 was merged on 2026-04-21 and is included in the staging deploy checklist (StagingDeployCash issue Deploy Checklist: New Expensify 2026-04-23 #88633).
• The bug affects the Wallet page spacing between the "Default" badge and the 3-dot menu. The PaymentMethodListItem component renders a MenuItem with both brickRoadIndicator and a ThreeDotsMenu as rightComponent.

Verification

Affected files:

• src/components/MenuItem.tsx — directly modified by PR fix: RBR is not close to chevron #86646
• src/components/ThreeDotsMenu/index.tsx — directly modified by PR fix: RBR is not close to chevron #86646
• src/pages/settings/Wallet/PaymentMethodListItem.tsx — uses MenuItem with brickRoadIndicator and ThreeDotsMenu, which are the two elements whose spacing is broken

Confirmation that PR #86646 modifies these files: Yes — src/components/MenuItem.tsx and src/components/ThreeDotsMenu/index.tsx are both in the PR's file list.

Root Cause

PR #86646 made two changes to MenuItem.tsx that together cause the spacing regression:

1. Line ~1094: Added styles.mr2 to the brickRoadIndicator view container. This adds a right margin to the error/warning dot indicator, pushing it further from the right edge and squeezing the space available for other right-side elements.

2. Line ~1118: Changed StyleUtils.getMenuItemIconStyle(isCompact) to StyleUtils.getMenuItemIconStyle(true). The getMenuItemIconStyle function returns width: 20 when compact is true and width: variables.componentSizeNormal (a larger value) when compact is false. By hardcoding true, the right icon container is always forced to a narrow 20px width, regardless of the actual isCompact prop value. On the Wallet page, the MenuItem items are not in compact mode, so this incorrectly shrinks the right icon container.

3. ThreeDotsMenu change: Adding styles.threeDotsMenuIconWidth (which sets width: variables.componentSizeXSmall) to the 3-dot menu button may further affect the overall right-side layout.

The combination of the forced compact icon width and the added mr2 margin causes the "Default" badge text to appear uncomfortably close to the 3-dot menu icon in the Wallet page.