Expense - RBR is not close to chevron

[lanitochka17]

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.50-1
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #76292
Email or phone of affected tester (no customers): snodijosdnjoijiosnj@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.2 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Create an expense without category.
4. Open the report.

Expected Result:

RBR should be close to chevron, like production.

Actual Result:

RBR is not close to chevron.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7115045_1774626412852.15.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @daledah

[melvin-bot]

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

[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: #76292 - "Change option row and push inputs chevrons to new look" by @daledah (High confidence)
Related Issues: #76266 (original feature request)

Recommendation: REVERT

The PR incorrectly implemented the icon size change. The design spec called for chevron icons to be 16px (iconSizeSmall), but the PR used 20px (iconSizeNormal) instead. This size discrepancy is causing the visual spacing issue where the RBR appears too far from the chevron.

Labels: This is a frontend bug - keeping DeployBlockerCash label. The issue is only reproducible on staging (not production), confirming the causing PR is in the current staging deploy.

📋 Detailed Analysis

Evidence

PR #76292 was merged on 2026-03-26 and is included in the current staging deploy (9.3.50-2). The issue was reported on 2026-03-27 and is only reproducible on staging, not production, which aligns perfectly with the PR merge timeline.

The PR modified multiple components including MoneyRequestReportPreviewContent.tsx to change the chevron icon styling.

Verification

The bug affects the Money Request report preview component, specifically the chevron/arrow icon spacing. I verified that:

• PR Change option row and push inputs chevrons to new look #76292 modified src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx
• The PR changes align with the reported symptoms (RBR spacing issue)
• The PR merge date (2026-03-26) matches when the bug first appeared

Root Cause

The PR changed the chevron icon size from 12px to 20px, but the design spec (#76266) explicitly called for 16px icons:

Design Spec: "Icon goes from 20px -> 16px"

What the PR did:

• Before: Used small + isButtonIcon props = 12px (iconSizeExtraSmall)
• After: Used width={variables.iconSizeNormal} = 20px

What it should have done:

• Use width={variables.iconSizeSmall} = 16px

This incorrect size (20px instead of 16px) is causing the visual spacing issue where the RBR appears too far from the chevron. The icon is 4px larger than intended, creating noticeable extra space.