[Due for payment 2025-03-13] [$250] The Next button moves up when user goes offline (Lot of padding between the offline indicator and next button)

[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.5-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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: @allgandalf
Slack conversation (hyperlinked to channel name): #Expensify bugs

Action Performed:

1. Enable company cards is workspace settings
2. Go to company cards
3. Click add cards
4. Go offline

Expected Result:

No visual issues

Actual Result:

When the user goes offline, there is a lot of padding between the offline indicator and next button

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

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/~021894827927894214499
• Upwork Job ID: 1894827927894214499
• Last Price Increase: 2025-02-26
• Automatic offers:
• allgandalf | Contributor | 106296233

Issue Owner

Current Issue Owner: @NicMendonca

[melvin-bot]

Triggered auto assignment to @NicMendonca (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 @allgandalf

Proposal

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

The Next button moves up when user goes offline

What is the root cause of that problem?

We are setting includeSafeAreaPaddingBottom to false in ScreenWrapper, this adds extra padding to the offline indicator:

App/src/pages/workspace/companyCards/addNew/SelectBankStep.tsx

Line 83 in eaa3be4

includeSafeAreaPaddingBottom={false}

This lets the offline indicator have a lot of padding because it adds paddingBottom and offlineIndicatorMobile.paddingBottom:

App/src/components/ScreenWrapper.tsx

Line 334 in eaa3be4

: [styles.offlineIndicatorMobile, {paddingBottom: paddingBottom + styles.offlineIndicatorMobile.paddingBottom}]

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

We need to set the value of includeSafeAreaPaddingBottom to true, this will make sure that we do not add any additional padding to the indicator thereby preventing the extra space:

    return (
        <ScreenWrapper
            testID={SelectBankStep.displayName}
            includeSafeAreaPaddingBottom={true}
            shouldEnablePickerAvoiding={false}
            shouldEnableMaxHeight
        >
            <HeaderWithBackButton
                title={translate('workspace.companyCards.addCards')}
                onBackButtonPress={handleBackButtonPress}
            />

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

N/A this is a UI bug, so no tests required

What alternative solutions did you explore? (Optional)

N/A

[NicMendonca]

there is a lot of padding between the offline indicator and next button

😬 I don't see that!

[NicMendonca]

gut checking with design team: https://expensify.slack.com/archives/C03TME82F/p1740520756946269

[melvin-bot]

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

[melvin-bot]

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