[Payment due] [$250] "Total" is not aligned correctly with "Out-of-pocket spend" and "Company spend" in SWRHP

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

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Create a reimbursable expense.
4. Create a non-reimbursable expense.
5. Open the expense report.

Expected Result:

"Total" will align correctly with "Out-of-pocket spend" and "Company spend".

Actual Result:

"Total" is not aligned correctly with "Out-of-pocket spend" and "Company spend" in SWRHP.

This issue only happens in SWRHP.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7051493_1768611139112.2.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022013251097766453967
• Upwork Job ID: 2013251097766453967
• Last Price Increase: 2026-01-26
• Automatic offers:
• etCoderDysto | Contributor | 110291299

Issue Owner

Current Issue Owner: @lakchote

[melvin-bot]

Triggered auto assignment to @garrettmknight (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[etCoderDysto]

Proposal

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

"Total" is not aligned correctly with "Out-of-pocket spend" and "Company spend" in SWRHP

What is the root cause of that problem?

We are using useResponsiveLayout to get shouldUseNarrowLayout instead of useResponsiveLayoutOnWideRHP here

App/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx

Line 47 in 75c85ae

const {shouldUseNarrowLayout} = useResponsiveLayout();

Then styles.mnw64p will be applied on amount, and justifyContentBetween will be applied on the view container.

App/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx

Lines 63 to 65 in 75c85ae

	<View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.pr3, textContainerStyle, shouldUseNarrowLayout && [styles.justifyContentBetween, styles.w100]]}>
	<Text style={[styles.mr3, styles.textLabelSupporting]}>{translate('common.total')}</Text>
	<Text style={[shouldUseNarrowLayout ? styles.mnw64p : styles.mnw100p, styles.textAlignRight, styles.textBold, hasPendingAction && styles.opacitySemiTransparent]}>

useResponsiveLayoutOnWideRHP checks if the report is opened in wide RHP but useResponsiveLayout doesn't have the same logic.

App/src/hooks/useResponsiveLayoutOnWideRHP/index.ts

Lines 21 to 25 in 75c85ae

	const isWideRHPDisplayedOnWideLayout = !isSmallScreenWidth && wideRHPRouteKeys.includes(route?.key);
	const isSuperWideRHPDisplayedOnWideLayout = !isSmallScreenWidth && superWideRHPRouteKeys.includes(route?.key);
	const shouldUseNarrowLayout = (isSmallScreenWidth || isInNarrowPaneModal) && !isSuperWideRHPDisplayedOnWideLayout && !isWideRHPDisplayedOnWideLayout;

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

We should use useResponsiveLayoutOnWideRHP since it validates if the layout is opened in wide RHP or narrow RHP

 const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP(); 

App/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx

Line 47 in 75c85ae

const {shouldUseNarrowLayout} = useResponsiveLayout();

What alternative solutions did you explore? (Optional)

Since MoneyRequestReportTransactionList.tsx uses useResponsiveLayoutOnWideRHP we can pass shouldUseNarrowLayout from MoneyRequestReportTransactionList.tsx to MoneyRequestReportTotalSpend.tsx as a prop to keep the layout calculation consistent between the components.

[melvin-bot]

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

[melvin-bot]

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

[yatin-italy]

🚨 Edited by proposal-police: This proposal was edited at 2026-01-26 16:32:19 UTC.

Proposal

Restate the problem this issue is trying to solve.

When viewing an expense report in Super Wide RHP, the layout is wrong. The app applies narrow layout styles to Total, Out-of-pocket spend, and Company spend. This causes bad alignment in Super Wide RHP.

What is the root cause of that problem?

The earliest wrong assumption is that every RHP inside RIGHT_MODAL_NAVIGATOR must use a narrow layout. In src/hooks/useResponsiveLayout/index.ts, isInNarrowPaneModal is true for all RHPs, including Super Wide RHP. This makes shouldUseNarrowLayout true even when the RHP is wide. Because of this wrong assumption, wide RHPs are treated as narrow and get the wrong styles.

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

• Update layout usage in components that render spend and totals.
• Do not change useResponsiveLayout.
• Exclude Super Wide RHP from narrow layout logic at the component level.

Files to modify:

• src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx
• src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

Changes in src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx:

// Add imports at top:
import {useIsFocused, useRoute} from '@react-navigation/native';
import {useContext, useMemo} from 'react';
import {WideRHPContext} from '@components/WideRHPContextProvider';

// Inside component function, after line 47:
const route = useRoute();
const {superWideRHPRouteKeys} = useContext(WideRHPContext);
const isInSuperWideRHP = route.key ? superWideRHPRouteKeys.includes(route.key) : false;
const effectiveShouldUseNarrowLayout = useMemo(
    () => shouldUseNarrowLayout && !isInSuperWideRHP,
    [shouldUseNarrowLayout, isInSuperWideRHP],
);

// Replace shouldUseNarrowLayout with effectiveShouldUseNarrowLayout on:
// Line 63:
shouldUseNarrowLayout && [styles.justifyContentBetween, styles.w100]
// Line 65:
shouldUseNarrowLayout ? styles.mnw64p : styles.mnw100p

Changes in src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx:

// Add import at top:
import {useFocusEffect, useRoute} from '@react-navigation/native';

// Inside component function, after line 170:
const route = useRoute();
const {superWideRHPRouteKeys} = useContext(WideRHPContext);
const isInSuperWideRHP = route.key ? superWideRHPRouteKeys.includes(route.key) : false;
const effectiveShouldUseNarrowLayout = useMemo(
    () => shouldUseNarrowLayout && !isInSuperWideRHP,
    [shouldUseNarrowLayout, isInSuperWideRHP],
);

// Replace shouldUseNarrowLayout with effectiveShouldUseNarrowLayout on:
// Line 596:
shouldUseNarrowLayout && styles.w100
// Line 611:
shouldUseNarrowLayout && [styles.justifyContentBetween, styles.w100]
// Line 622:
shouldUseNarrowLayout ? styles.mnw64p : styles.mnw100p

// Do NOT change lines 460 and 576

What alternative solutions did you explore? (Optional)

Updating useResponsiveLayout was considered. It was not chosen because it affects all RHPs and increases risk. This fix limits the change only to components that control the broken layout.

[huult]

Proposal

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

"Total" is not aligned correctly

What is the root cause of that problem?

We use shouldUseNarrowLayout to determine when to apply mobile-style layouts, either on mobile devices or when the view is rendered in the RHP. In this case, the page is displayed in the RHP, so the mobile layout styles are applied.

App/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx

Line 47 in 7406d2e

const {shouldUseNarrowLayout} = useResponsiveLayout();

App/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx

Line 63 in 7406d2e

<View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.pr3, textContainerStyle, shouldUseNarrowLayout && [styles.justifyContentBetween, styles.w100]]}>

App/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx

Line 65 in 7406d2e

<Text style={[shouldUseNarrowLayout ? styles.mnw64p : styles.mnw100p, styles.textAlignRight, styles.textBold, hasPendingAction && styles.opacitySemiTransparent]}>

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

To resolve this issue, we should update the condition so that mobile-style layouts are applied only on mobile devices, by checking isSmallScreenWidth instead.

App/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx

Line 47 in 7406d2e

const {shouldUseNarrowLayout} = useResponsiveLayout();

App/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx

Line 63 in 7406d2e

<View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.pr3, textContainerStyle, shouldUseNarrowLayout && [styles.justifyContentBetween, styles.w100]]}>

App/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx

Line 65 in 7406d2e

<Text style={[shouldUseNarrowLayout ? styles.mnw64p : styles.mnw100p, styles.textAlignRight, styles.textBold, hasPendingAction && styles.opacitySemiTransparent]}>

update to:

  isSmallScreenWidth

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸