[HOLD for payment 2024-04-02] [$500] IOS- Extra margin below offline indicator in Profile page

[kbecciv]

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: 1.4.52-0
Reproducible in staging?: y
Reproducible in production?: n
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch New Expensify.
2. Go offline.
3. Go to Profile from the bottom navigation.

Expected Result:

There is no extra margin below offline indicator.

Actual Result:

There is extra margin below offline indicator.

Workaround:

n/a

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• 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/~0199282bcbfa5f2d37
• Upwork Job ID: 1768345821971177472
• Last Price Increase: 2024-03-14

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

[melvin-bot]

Triggered auto assignment to @yuwenmemon (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[ahmedGaber93]

Proposal

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

IOS- Extra margin below offline indicator in Profile page

What is the root cause of that problem?

we pass includeSafeAreaPaddingBottom = false but recording to this comment below the ScreenWrapper put paddingbottom equal SafeAreaPaddingBottom even if includeSafeAreaPaddingBottom = false
note SafeAreaPaddingBottom in ios equal the ios notch homebar height and mostly equal 0 in android and other platform

App/src/components/ScreenWrapper.tsx

Lines 223 to 226 in 593d6c0

	// We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked.
	if (includeSafeAreaPaddingBottom || (isOffline && shouldShowOfflineIndicator)) {
	paddingStyle.paddingBottom = paddingBottom;
	}

and in this case we should pass pass style styles.pb0 in , but we missed it

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

pass style styles.pb0 in <ScreenWrapper> in InitialSettingsPage here

we can also check other pages if need the same fix

What alternative solutions did you explore? (Optional)

[yuwenmemon]

@ahmedGaber93 does that explain why we're only seeing it on iOS though?

[ahmedGaber93]

@yuwenmemon

does that explain why we're only seeing it on iOS though?

i update the root cause with the explanation.

[yuwenmemon]

Okay, my local iOS is taking forever to build so I'll at least take a look at what you're proposing @ahmedGaber93 - can you spin up a PR with screenshots on all platforms ASAP?

[melvin-bot]

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.