Android - Workspace - The Save button does not have the right alignment in offline mode

[IuliiaHerets]

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: 9.0.79-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5382287
Issue reported by: Applause Internal Team
Device used: Samsung S23FE/ Android 14
App Component: Workspace Settings

Action Performed:

1. Go to the Expensify app
2. Go offline
3. Tap on Settings
4. Tap on Workspaces
5. Go to the settings of any workspace
6. Tap on the Workspace profile
7. Tap on the Workspace name

Expected Result:

The Save button is displayed close to the navigation bar.

Actual Result:

The Save button is displayed far from the navigation bar and from the keypad when is displayed. There is a empty space between the button and the nav bar. The offline message is also displayed far from the navigation bar when the keypad is displayed.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

View all open jobs on GitHub

[melvin-bot]

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

[BhuvaneshPatil]

Proposal

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

For android, In workspace name edit page we have extra padding at the bottom of submit button and offline indicator.

What is the root cause of that problem?

We are setting includeSafeAreaPaddingBottom as false here.

App/src/pages/workspace/WorkspaceNamePage.tsx

Lines 64 to 68 in 9412d21

	<ScreenWrapper
	includeSafeAreaPaddingBottom={false}
	shouldEnableMaxHeight
	testID={WorkspaceNamePage.displayName}
	>

As it's false the extra padding is applied at this place -

App/src/components/ScreenWrapper.tsx

Lines 299 to 303 in 9412d21

	containerStyles={
	includeSafeAreaPaddingBottom
	? [styles.offlineIndicatorMobile]
	: [styles.offlineIndicatorMobile, {paddingBottom: paddingBottom + styles.offlineIndicatorMobile.paddingBottom}]
	}

Thus we are seeing extra padding at bottom.

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

We need to remove the prop includeSafeAreaPaddingBottom from ScreenWrapper component in WorkspaceNamePage component.
Or we can pass it as true.

Same is done here -

App/src/pages/settings/Profile/DisplayNamePage.tsx

Lines 68 to 71 in 9412d21

	<ScreenWrapper
	includeSafeAreaPaddingBottom
	shouldEnableMaxHeight
	testID={DisplayNamePage.displayName}

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

[parasharrajat]

Proposal looks solid but what caused this issue?

[parasharrajat]

Looks like this will be solved in #51504 during their next PR.