[Due for payment 2025-04-08] [Discussion] Workspace - In"Default currency" page, extra white space below "you appears to offline

[jponikarchuk]

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: V9.1.16-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: N
Email or phone of affected tester (no customers): Slottwo1+dare1@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Workspace Settings

Action Performed:

1. Launch app
2. Go to workspace settings - overview
3. Turn off the internet
4. Tap default currency

Expected Result:

In workspace "Default currency" page, there must be not extra white space below "you appears to be offline" and keypad.

Actual Result:

In workspace "Default currency" page, extra white space below "you appears to be offline" and keypad.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @flaviadefaria

[melvin-bot]

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

[andriivitiv]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-20 18:58:52 UTC.

Proposal

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

The default currency page has extra space below "you appears to offline".

What is the root cause of that problem?

We have includeSafeAreaPaddingBottom={false} here

App/src/pages/workspace/WorkspaceOverviewCurrencyPage.tsx

Lines 45 to 47 in 8be71cc

	<ScreenWrapper
	includeSafeAreaPaddingBottom={false}
	testID={WorkspaceOverviewCurrencyPage.displayName}

which is passed to the useBottomSafeSafeAreaPaddingStyle hook as the addBottomSafeAreaPadding parameter

App/src/components/ScreenWrapper.tsx

Lines 345 to 348 in fd11e52

	const mobileOfflineIndicatorBottomSafeAreaStyle = useBottomSafeSafeAreaPaddingStyle({
	addBottomSafeAreaPadding: enableEdgeToEdgeBottomSafeAreaPadding ? true : !includeSafeAreaPaddingBottom,
	styleProperty: isSoftKeyNavigation ? 'bottom' : 'paddingBottom',
	});

If includeSafeAreaPaddingBottom is false, then addBottomSafeAreaPadding becomes true and a padding is added.

includeSafeAreaPaddingBottom={false} was added in #27861 when this page was first created so this case was probably overlooked.

The same issue exists on some other pages, e.g. WS categories page.

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

Replace includeSafeAreaPaddingBottom={false} with includeSafeAreaPaddingBottom.

Result

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

None, UI bug

[strepanier03]

I can follow the steps to the correct page but it's difficult to know how much white space is expected and if I'm actually seeing too much. 🤔

It looks like the same amount when I'm online as offline and it doesn't seem like an egregiously large amount either.

[strepanier03]

Raised with design to discuss here. Will take action once people weigh in.

[FitseTLT]

Having @chrispader thoughts also can be useful here.

[chrispader]

i think i know the fix... will setup a PR tomorrow