[Due for payment 2025-09-16] [$250] Extra padding in money report header when selecting the expense in medium screen and small screen

[m-natarajan]

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.1.91-0
Reproducible in staging?: Y
Reproducible in production?: Y
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: @dukenv0307
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Create a new workspace
2. Create 2 expenses
3. Resize screen to medium size
4. Select the expense
5. Observe the report header

Expected Result:

No extra padding

Actual Result:

There is extra padding between the selected button and next steps message

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:

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

Platforms Tested:

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

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

Screenshots/Videos

Add any screenshot/video evidence

bug.mov

Recording.1492.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021953830433649841307
• Upwork Job ID: 1953830433649841307
• Last Price Increase: 2025-08-08

Issue Owner

Current Issue Owner: @ZhenjaHorbach

[melvin-bot]

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

[m-natarajan]

Proposal by @dukenv0307

Proposal

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

Extra padding in money report header when selecting the expense in medium screen and small screen

What is the root cause of that problem?

We have styles.gap3 in container view if we have more than 1 more content

App/src/components/MoneyReportHeader.tsx

Line 1141 in e3aab61

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

App/src/components/MoneyReportHeader.tsx

Line 1103 in e3aab61

const shouldAddGapToContents = moreContent.length > 1;

But when we show the selected button we also set styles.pb3 here

App/src/components/MoneyReportHeader.tsx

Lines 1072 to 1075 in e3aab61

	<View
	style={[styles.dFlex, styles.w100, styles.pb3]}
	key="1"
	>

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

In case we have more than 1 more content we should not set styles.pb3 for the selected button because we have gap here

    const hasOtherItems = (shouldShowNextStep && !!optimisticNextStep?.message?.length) || (shouldShowNextStep && !optimisticNextStep && !!isLoadingInitialReportActions && !isOffline) || !!statusBarProps;
    ...
    <View
    style={[styles.dFlex, styles.w100, !hasOtherItems && styles.pb3]}
    key="1"
    >

App/src/components/MoneyReportHeader.tsx

Lines 1072 to 1075 in e3aab61

	<View
	style={[styles.dFlex, styles.w100, styles.pb3]}
	key="1"
	>

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

None

What alternative solutions did you explore? (Optional)

We can simply remove styles.pb3 here

[melvin-bot]

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

[melvin-bot]

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

[awabahmad]

Proposal

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

There is visible extra spacing between the UI control that shows the "Selected" button (selected transactions button) and the subsequent "Next steps" message in the money report header on narrow/small layouts. This makes the section feel visually disconnected and wastes vertical space.

What is the root cause of that problem?

In the narrow layout variant where the selected-transactions control is rendered, the wrapping container applied an explicit bottom padding via the spacing token (pb3). That additional padding stacked with surrounding layout spacing, creating an unintended gap above the "Next steps" message.

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

In the narrow layout variant where the selected-transactions control is rendered, the wrapping container applied an explicit bottom padding via the spacing token (pb3). That additional padding stacked with surrounding layout spacing, creating an unintended gap above the "Next steps" message.

const moreContentUnfiltered = [
shouldShowSelectedTransactionsButton && shouldDisplayNarrowVersion && (
<View
style={[styles.dFlex, styles.w100]}
key="1"
>

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

• Render the money report header in narrow layout with the selected-transactions control shown and assert that the wrapper styles do not include an additional bottom padding beyond the standardized layout spacing.
• Visual/snapshot test of the narrow layout variant verifying that the vertical spacing between the selected-transactions control and the "Next steps" message matches the design token expectations.
• Regression check that wide/desktop layouts are unaffected and that the selected-transactions control still renders correctly when toggled on/off.
• Interaction sanity check that removing the extra padding does not affect focus, hit areas, or keyboard navigation for the selected-transactions control.

What alternative solutions did you explore? (Optional)

• Reducing the padding token (e.g., pb2 instead of pb3): still risked double-spacing in some contexts and was less robust than removing the redundant padding.
• Adding margin to the following message instead of removing padding: increases complexity and can reintroduce spacing drift in other configurations.
• Introducing conditional spacing logic: unnecessary complexity for a purely presentational issue; removing the redundant padding is simpler and clearer.

[ALIAHSANRST]

Contributor details
Your Expensify account email: aliahsan8123@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/aliahsan1

» Problem Summary
In medium and small screen layouts of the MoneyReportHeader, when the "Selected Transactions" button is shown alongside additional content (like the "Next Steps" message), there’s excessive vertical spacing. This leads to visual inconsistency and wasted space, especially on mobile screens.

» Root Cause
The extra padding comes from two overlapping style applications:

– styles.pb3 is applied directly to the selected-transactions wrapper
– When moreContent.length > 1, another styles.pb3 is applied alongside styles.gap3

This causes the space between elements to double up when both conditions are true.

» Proposed Fix
Remove the redundant bottom padding on the selected-transactions container only when additional content is present.

const hasOtherItems =
(shouldShowNextStep && !!optimisticNextStep?.message?.length) ||
(shouldShowNextStep && !optimisticNextStep && !!isLoadingInitialReportActions && !isOffline) ||
!!statusBarProps;

<View
style={[styles.dFlex, styles.w100, !hasOtherItems && styles.pb3]}
key="1"
>
{/* Selected transactions button */}
</View>

» Alternative Solutions Considered

– Using pb2 instead of pb3: didn’t fully resolve the spacing issue in all views
– Adding margin to the Next Steps section: led to inconsistency and complex layout logic
– Unconditionally removing pb3: caused layout to feel tight when no other content was present

» Code Submission Plan
After approval and contract activation on Upwork:

– I will fork the repo, implement the fix on a separate branch
– Open a PR with screenshots for (Web)
– Include confirmation of local testing
– Follow Expensify’s code style and contribution guidelines

[melvin-bot]

📣 @ALIAHSANRST! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>