[$125] [Ideal nav] Android - No bottom margin under the sign out button

[kavimuru]

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.59-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: n/a
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation:

Action Performed:

1. Navigate to staging.new.expensify.com
2. Click on settings
3. Scroll down to the bottom of the page
4. Hold on the sign out button (don't click it, but hold on it)

Expected Result:

There is a bottom margin under the sign out button

Actual Result:

There is no bottom margin under the sign out button which is inconsistent with other platforms like mWeb

Workaround:

unknown

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

Bug6435986_1712086689970.Screen_Recording_20240402_223437_Chrome.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0153b4e342ae26d6b3
• Upwork Job ID: 1775442319575195648
• Last Price Increase: 2024-04-12
• Automatic offers:
• Krishna2323 | Contributor | 0

[melvin-bot]

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

[kavimuru]

@sonialiap FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[Krishna2323]

Proposal

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

Android - No bottom margin under the sign out button

What is the root cause of that problem?

We don't have padding bottom applied to ScrollView.

App/src/pages/settings/InitialSettingsPage.tsx

Lines 479 to 485 in 935df86

	<ScrollView
	ref={scrollViewRef}
	onLayout={onLayout}
	onScroll={onScroll}
	scrollEventThrottle={16}
	// We use marginTop to prevent glitching on the initial frame that renders before scrollTo.
	contentContainerStyle={[!isAfterOnLayout && !!scrollOffset && {marginTop: -scrollOffset}]}

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

We need to add padding/margin bottom to contentContainerStyle. We may want to apply pb4 but that can be discussed.

Optionally:
We can also apply flexGrow1 to ScrollView.
We can remove pt4 from style prop it to contentContainerStyle.

App/src/pages/settings/InitialSettingsPage.tsx

Line 486 in 935df86

style={[styles.w100, styles.pt4]}

Result

[ahmedGaber93]

This seems a regression from #38274 which added style styles.pt4 to scrollview that move the scrollview content bottom with this padding value, I think the style should set to contentContainerStyle instead of style.

[melvin-bot]

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

[melvin-bot]

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

[Krishna2323]

Proposal updated

• Added reference