[Due for payment 2025-05-14] [$250] Extra space shown above next steps when viewing report in the RHP #61218

m-natarajan · 2025-04-30T20:47:26Z

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

Version Number:
Reproducible in staging?: Needs Reproduction
Reproducible in production?: Needs Reproduction
If this was caught during regression testing, add the test name, ID and link from TestRail:
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:

Have a expense report to approve
Navigate to reports
Click the expense
Observe the RHP

Expected Result:

The spacing above the “Next Steps” section and below the action buttons should match the standard

Actual Result:

There is a visibly large gap above the “Next Steps” section and/or below the buttons,

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Select the officially supported platforms where the issue was reproduced:

Platforms Tested:

On which of our officially supported platforms was this issue tested:

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021917684655094235087
Upwork Job ID: 1917684655094235087
Last Price Increase: 2025-04-30
Automatic offers:

FitseTLT | Contributor | 107138135

Issue Owner

Current Issue Owner: @twisterdotcom

melvin-bot · 2025-04-30T20:47:39Z

Triggered auto assignment to @twisterdotcom (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.

MelvinBot · 2025-04-30T20:48:24Z

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

ZhenjaHorbach · 2025-04-30T20:52:33Z

I can reproduce and can be a reviewer here

And there are no specific steps here
The only thing is that the new interface is in beta

twisterdotcom · 2025-04-30T20:56:27Z

Okay, can set External and make you C+ @ZhenjaHorbach.

melvin-bot · 2025-04-30T20:57:07Z

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

melvin-bot · 2025-04-30T20:57:13Z

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

samranahm · 2025-04-30T21:07:45Z

🚨 Edited by proposal-police: This proposal was edited at 2025-04-30 21:32:53 UTC.

Proposal

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

Extra space shown above next steps when viewing report in the RHP

What is the root cause of that problem?

We render our next step message here

App/src/components/MoneyReportHeaderStatusBar.tsx

Lines 46 to 48 in ec1dd0c

    
           <View style={[styles.dFlex, styles.flexRow, styles.flexShrink1]}> 
        
               <RenderHTML html={messageContent} /> 
        
           </View>

And we need to make this vertically align

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

We should pass marginBottom: 4, here

https://github.com/Expensify/App/blob/ec1dd0ca419fad69719842a9994cc6c91c149f40/src/styles/index.ts#L5057-L5056

this work on both view new UI (under beta) and previous UI

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

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.

nabi-ebrahimi · 2025-04-30T21:34:50Z

Proposal

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

There is a large, unintended vertical space above the “Next Steps” section in the Right Hand Panel (RHP) when viewing a report, which affects the visual layout and user experience.

What is the root cause of that problem?

The prop shouldAddGapToContents is applying styles.gap3 to the container unconditionally, which creates an extra gap above “Next Steps” even when it's not needed. This happens particularly when both action buttons and the “Next Steps” section are visible, leading to redundant spacing between them.

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

We should either remove shouldAddGapToContents && styles.gap3 from the container or update the condition to only apply the gap when shouldShowNextStep is false. This will ensure spacing is applied only when necessary.

Snippet: here

<View style={[
    styles.dFlex,
    styles.flexColumn,
    // Updated condition: only apply gap if Next Steps is not shown
    !shouldShowNextStep && styles.gap3,
    styles.pb3,
    styles.ph5,
]}>
    <View style={[styles.dFlex, styles.w100, styles.flexRow, styles.gap3]}>
        {shouldShowSelectedTransactionsButton && shouldUseNarrowLayout && (
            <ButtonWithDropdownMenu
                onPress={() => null}
                options={selectedTransactionsOptions}
                customText={translate('workspace.common.selected', {count: selectedTransactionsID.length})}
                isSplitButton={false}
                shouldAlwaysShowDropdownMenu
                wrapperStyle={styles.w100}
            />
        )}
    </View>
    {shouldShowNextStep && <MoneyReportHeaderStatusBar nextStep={optimisticNextStep} />}
    {!!statusBarProps && (
        <MoneyRequestHeaderStatusBar
            icon={statusBarProps.icon}
            description={statusBarProps.description}
        />
    )}
</View>

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

ChavdaSachin · 2025-04-30T21:39:52Z

🚨 Edited by proposal-police: This proposal was edited at 2025-04-30 21:45:04 UTC.

Proposal

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

What is the root cause of that problem?

Wrong conditional rendering here

App/src/components/MoneyReportHeader.tsx

Lines 704 to 706 in ec1dd0c

    
           <View style={[styles.dFlex, styles.w100, styles.flexRow, styles.gap3]}> 
        
               {shouldShowSelectedTransactionsButton && shouldUseNarrowLayout && ( 
        
                   <ButtonWithDropdownMenu

Currently when either of shouldShowSelectedTransactionsButton or shouldUseNarrowLayout condition is falsie - it renders an empty view which renders an additional space due to the gap3 property applied to the parent component here.

App/src/components/MoneyReportHeader.tsx

Line 703 in ec1dd0c

    
           <View style={[styles.dFlex, styles.flexColumn, shouldAddGapToContents && styles.gap3, styles.pb3, styles.ph5]}>

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

We should conditionally render the view component here instead of ButtonWithDropdownMenu component.

App/src/components/MoneyReportHeader.tsx

Lines 704 to 706 in ec1dd0c

    
           <View style={[styles.dFlex, styles.w100, styles.flexRow, styles.gap3]}> 
        
               {shouldShowSelectedTransactionsButton && shouldUseNarrowLayout && ( 
        
                   <ButtonWithDropdownMenu

    {shouldShowSelectedTransactionsButton && shouldUseNarrowLayout && (
        <View style={[styles.dFlex, styles.w100, styles.flexRow, styles.gap3]}>
            <ButtonWithDropdownMenu
                onPress={() => null}
                options={selectedTransactionsOptions}
                customText={translate('workspace.common.selected', {count: selectedTransactionsID.length})}
                isSplitButton={false}
                shouldAlwaysShowDropdownMenu
                wrapperStyle={styles.w100}
            />
        </View>
    )}

Additionally check the other components of the page and correct the condition in case of similar mistake

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

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

github-actions · 2025-04-30T21:40:15Z

⚠️ Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

FitseTLT · 2025-04-30T21:47:33Z

🚨 Edited by proposal-police: This proposal was edited at 2025-04-30 22:07:52 UTC.

Proposal

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

Extra space shown above next steps when viewing report in the RHP

What is the root cause of that problem?

We are adding a gap of 3 if next step or status bar is shown

App/src/components/MoneyReportHeader.tsx

Line 347 in 03dfc95

    
           const shouldAddGapToContents = shouldUseNarrowLayout && (!!statusBarProps || shouldShowNextStep);

to the parent view that holds next step here

App/src/components/MoneyReportHeader.tsx

Lines 703 to 723 in 03dfc95

    
           <View style={[styles.dFlex, styles.flexColumn, shouldAddGapToContents && styles.gap3, styles.pb3, styles.ph5]}> 
        
               <View style={[styles.dFlex, styles.w100, styles.flexRow, styles.gap3]}> 
        
                   {shouldShowSelectedTransactionsButton && shouldUseNarrowLayout && ( 
        
                       <ButtonWithDropdownMenu 
        
                           onPress={() => null} 
        
                           options={selectedTransactionsOptions} 
        
                           customText={translate('workspace.common.selected', {count: selectedTransactionsID.length})} 
        
                           isSplitButton={false} 
        
                           shouldAlwaysShowDropdownMenu 
        
                           wrapperStyle={styles.w100} 
        
                       /> 
        
                   )} 
        
               </View> 
        
               {shouldShowNextStep && <MoneyReportHeaderStatusBar nextStep={optimisticNextStep} />} 
        
               {!!statusBarProps && ( 
        
                   <MoneyRequestHeaderStatusBar 
        
                       icon={statusBarProps.icon} 
        
                       description={statusBarProps.description} 
        
                   /> 
        
               )} 
        
           </View>

so even if next step is the only item in the flex a gap is creating unnecessary space above next step

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

This shouldAddGapToContents was previously set to true only if the parent view contains other action buttons (like settlement or export buttons) which are children of the view above next step in addition to next step

App/src/components/MoneyReportHeader.tsx

Lines 471 to 474 in 4f8cfd7

    
           const shouldAddGapToContents = 
        
               shouldUseNarrowLayout && 
        
               (isDuplicate || shouldShowSettlementButton || !!shouldShowExportIntegrationButton || shouldShowSubmitButton || shouldShowMarkAsCashButton) && 
        
               (!!statusBarProps || shouldShowNextStep);

but this pr removed those conditions and now the parent view is having an unnecessary gap while it is only having the next step as its flex item.
Gap is only relevant if the flex parent view contains multiple items so in our case following the previous logic we will only add the gap if the ButtonWithDropDown here is displayed i.e. shouldShowSelectedTransactionsButton is true

    const shouldAddGapToContents = shouldUseNarrowLayout && shouldShowSelectedTransactionsButton && (!!statusBarProps || shouldShowNextStep);

Alternatively we can set the gap when any two of the three children components of the parent view are displayed (from shouldShowSelectedTransactionsButton, statusBarProps , shouldShowNextStep) but I think the above is better because we will follow the pattern we used to use before the regression was caused by the above pr mentioned.
Optionally if not needed we can remove the gap here so remove the code here

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N / A style bug

What alternative solutions did you explore? (Optional)

ZhenjaHorbach · 2025-04-30T22:40:07Z

Thanks for your proposals !
But as for me @FitseTLT's proposal looks a bit better with full explanation of changes
And I agree with these changes
So I don't mind to go with this proposal

🎀 👀 🎀 C+ reviewed

melvin-bot · 2025-04-30T22:40:24Z

Triggered auto assignment to @MonilBhavsar, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

mountiny · 2025-05-01T12:34:07Z

I recommend setting the price to $125 due to simplicity of this issue @MonilBhavsar

FitseTLT · 2025-05-01T12:38:49Z

I recommend setting the price to $125 due to simplicity of this issue @MonilBhavsar

@mountiny but I could tell you that identifying the regression and a fix that aligns with the previous behavior was not at all straightforward to come up with my proposal from my perspective.

ChavdaSachin · 2025-05-01T13:58:07Z

Agreed with @FitseTLT

luacmartins · 2025-05-01T15:39:25Z

Hey! I have a PR to fix this one already #61242. I'll close it in favor of the selected proposal here though, since I saw that we have already selected one

melvin-bot · 2025-05-01T15:41:09Z

📣 @FitseTLT 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

melvin-bot · 2025-05-07T00:16:03Z

Reviewing label has been removed, please complete the "BugZero Checklist".

melvin-bot · 2025-05-07T00:16:08Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.40-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

fix - Extra space shown above next steps when viewing report in the RHP #61332

If no regressions arise, payment will be issued on 2025-05-14. 🎊

For reference, here are some details about the assignees on this issue:

@FitseTLT requires payment automatic offer (Contributor)
@ZhenjaHorbach requires payment through NewDot Manual Requests

melvin-bot · 2025-05-07T00:16:10Z

@ZhenjaHorbach @twisterdotcom @ZhenjaHorbach The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

melvin-bot · 2025-05-16T08:23:11Z

@twisterdotcom Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

twisterdotcom · 2025-05-16T14:50:00Z

Payment Summary:

@FitseTLT paid $250 here (Contributor)
@ZhenjaHorbach paid $250 via NewDot Manual Request

m-natarajan added Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 Needs Reproduction Reproducible steps needed retest-weekly Apply this label if you want this issue tested on a Weekly basis by Applause labels Apr 30, 2025

m-natarajan added this to #expensify-bugs Apr 30, 2025

melvin-bot bot assigned twisterdotcom Apr 30, 2025

twisterdotcom added External Added to denote the issue can be worked on by a contributor and removed Needs Reproduction Reproducible steps needed retest-weekly Apply this label if you want this issue tested on a Weekly basis by Applause labels Apr 30, 2025

melvin-bot bot changed the title ~~Extra space shown above next steps when viewing report in the RHP~~ [$250] Extra space shown above next steps when viewing report in the RHP Apr 30, 2025

twisterdotcom assigned ZhenjaHorbach Apr 30, 2025

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Apr 30, 2025

melvin-bot bot assigned Pujan92 Apr 30, 2025

twisterdotcom unassigned Pujan92 Apr 30, 2025

melvin-bot bot assigned MonilBhavsar Apr 30, 2025

luacmartins mentioned this issue May 1, 2025

Remove gap from new header #61242

Closed

51 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels May 1, 2025

luacmartins assigned luacmartins and unassigned MonilBhavsar May 1, 2025

luacmartins assigned FitseTLT May 1, 2025

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label May 1, 2025

FitseTLT mentioned this issue May 2, 2025

fix - Extra space shown above next steps when viewing report in the RHP #61332

Merged

50 tasks

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels May 2, 2025

melvin-bot bot changed the title ~~[$250] Extra space shown above next steps when viewing report in the RHP~~ [Due for payment 2025-05-14] [$250] Extra space shown above next steps when viewing report in the RHP May 7, 2025

melvin-bot bot removed the Reviewing Has a PR in review label May 7, 2025

melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 labels May 13, 2025

melvin-bot bot removed the Overdue label May 16, 2025

twisterdotcom closed this as completed May 16, 2025

github-project-automation bot moved this to Done in #expensify-bugs May 16, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Due for payment 2025-05-14] [$250] Extra space shown above next steps when viewing report in the RHP #61218

[Due for payment 2025-05-14] [$250] Extra space shown above next steps when viewing report in the RHP #61218

m-natarajan commented Apr 30, 2025 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Apr 30, 2025

MelvinBot commented Apr 30, 2025

ZhenjaHorbach commented Apr 30, 2025 •

edited

Loading

twisterdotcom commented Apr 30, 2025

melvin-bot bot commented Apr 30, 2025

melvin-bot bot commented Apr 30, 2025

samranahm commented Apr 30, 2025 •

edited by github-actions bot

Loading

nabi-ebrahimi commented Apr 30, 2025

ChavdaSachin commented Apr 30, 2025 •

edited

Loading

github-actions bot commented Apr 30, 2025

FitseTLT commented Apr 30, 2025 •

edited

Loading

ZhenjaHorbach commented Apr 30, 2025

melvin-bot bot commented Apr 30, 2025

mountiny commented May 1, 2025

FitseTLT commented May 1, 2025

ChavdaSachin commented May 1, 2025

luacmartins commented May 1, 2025 •

edited

Loading

melvin-bot bot commented May 1, 2025

melvin-bot bot commented May 7, 2025

melvin-bot bot commented May 7, 2025

melvin-bot bot commented May 7, 2025

melvin-bot bot commented May 16, 2025

twisterdotcom commented May 16, 2025

[Due for payment 2025-05-14] [$250] Extra space shown above next steps when viewing report in the RHP #61218

[Due for payment 2025-05-14] [$250] Extra space shown above next steps when viewing report in the RHP #61218

Comments

m-natarajan commented Apr 30, 2025 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Apr 30, 2025

MelvinBot commented Apr 30, 2025

ZhenjaHorbach commented Apr 30, 2025 • edited Loading

twisterdotcom commented Apr 30, 2025

melvin-bot bot commented Apr 30, 2025

melvin-bot bot commented Apr 30, 2025

samranahm commented Apr 30, 2025 • edited by github-actions bot Loading

Proposal

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

What is the root cause of that problem?

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

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

nabi-ebrahimi commented Apr 30, 2025

Proposal

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

What is the root cause of that problem?

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

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

ChavdaSachin commented Apr 30, 2025 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

github-actions bot commented Apr 30, 2025

FitseTLT commented Apr 30, 2025 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

ZhenjaHorbach commented Apr 30, 2025

melvin-bot bot commented Apr 30, 2025

mountiny commented May 1, 2025

FitseTLT commented May 1, 2025

ChavdaSachin commented May 1, 2025

luacmartins commented May 1, 2025 • edited Loading

melvin-bot bot commented May 1, 2025

melvin-bot bot commented May 7, 2025

melvin-bot bot commented May 7, 2025

melvin-bot bot commented May 7, 2025

melvin-bot bot commented May 16, 2025

twisterdotcom commented May 16, 2025

m-natarajan commented Apr 30, 2025 •

edited by melvin-bot bot

Loading

ZhenjaHorbach commented Apr 30, 2025 •

edited

Loading

samranahm commented Apr 30, 2025 •

edited by github-actions bot

Loading

ChavdaSachin commented Apr 30, 2025 •

edited

Loading

FitseTLT commented Apr 30, 2025 •

edited

Loading

luacmartins commented May 1, 2025 •

edited

Loading