[Due for payment 2026-07-16] [$250] Web - Spend - View button size is different on Reports and Expenses on Spend tab

[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.17-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: #87998
Email or phone of affected tester (no customers): sjdoijnoidjiosdjosnj@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.5 / Chrome
App Component: Search

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Create two expenses.
4. Create an empty report.
5. Go to Spend > Reports.
   → View button size is small.
6. Go to Spend > Expenses.
7. Click Display > Edit columns.
8. Select Action > Save.
   → View button size is big.

Expected Result:

View button size should be the same on Reports and Expenses on Spend tab.

Actual Result:

View button size is different on Reports and Expenses on Spend tab.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7188815_1782226844293.29.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Julia Ponikarchuk
Bug ID: 7188815

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022069486307385131536
• Upwork Job ID: 2069486307385131536
• Last Price Increase: 2026-06-30

Issue Owner

Current Issue Owner: @nyomanjyotisa

[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/1e0bacf1c093efc21e77904d9d398ce72181bec7e019b2e76d17646f28b54017

[melvin-bot]

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

[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

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

On the Spend tab, the View button renders at a different (smaller) width on the Reports view than on the Expenses view. They should be visually identical.

What is the root cause of that problem?

Regression from #87998. The Search action Button is always rendered with styles.w100 (width: 100%), so its effective width is dictated by its immediate parent's width. The ACTION column container uses alignItemsCenter, so any intermediate child with no explicit width shrink-wraps to its content.

PR #87998 wrapped only the Reports-row action cell in a new ReportSubmitToPopoverMeasurableAnchor, which renders a bare <View> with no width/flex style:

Code references (sha 4714b42)

The wrapper added on the Reports row — ExpenseReportListItemRowWide.tsx:195-213:

<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)]}>
    <ReportSubmitToPopoverMeasurableAnchor>
        <DeferredActionCell .../>
    </ReportSubmitToPopoverMeasurableAnchor>
</View>

The anchor renders an unstyled, shrink-wrapping View — ReportSubmitToPopoverAnchor.tsx:257-263:

<View
    ref={anchorRef}
    collapsable={false}
>
    {children}
</View>

The button always uses w100 — ActionCell/index.tsx:61-77.

The Expenses row's DeferredActionCell is a direct child of the styled ACTION column (no anchor wrapper) — TransactionItemRowWide.tsx:291-313. Its anchor is applied at the row level instead.

So on Reports, width: 100% resolves to the shrink-wrapped wrapper's content width (small button); on Expenses, it resolves to the full ACTION column width (w68/w80) — the bigger button.

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

Make the ReportSubmitToPopoverMeasurableAnchor wrapper layout-neutral so it doesn't shrink-wrap. In ReportSubmitToPopoverAnchor.tsx:257-263, add style={styles.w100} to the wrapper View:

return (
    <View
        ref={anchorRef}
        collapsable={false}
        style={styles.w100}
    >
        {children}
    </View>
);

This is the robust fix because it keeps the wrapper width-neutral everywhere it's used, restoring the button to full ACTION-column width and matching the Expenses tab. (Alternative: wrap the Expenses cell in the same anchor for symmetry — but the w100 fix is simpler and lower-risk.)

What alternative solutions did you explore? (Optional)

Reverting #87998 would resolve the regression but loses the submit-to-manager popover feature; the targeted w100 fix is preferred.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement this to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.