Category - Offline indicator appears below "Members must categorize.." instead of page bottom

[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: v1.4.45-1
Reproducible in staging?: Yes
Reproducible in production?: No
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: Applause internal team
Slack conversation:

Action Performed:

Precondition:

• User is admin of Collect workspace that has categories.

1. Go to staging.new.expensify.com
2. Go to workspace settings.
3. Select the Collect workspace.
4. Tap Categories.
5. Tap Settings.
6. Go offline

Expected Result:

The offline indicator will be displayed at the bottom of the screen.

Actual Result:

The offline indicator is displayed below "Members must categorize all spend",

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

Bug6397087_1709215508809.Screen_Recording_20240229_113715_New_Expensify.mp4

Add any screenshot/video evidence

View all open jobs on GitHub

[melvin-bot]

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

[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 @lakchote (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[m-natarajan]

We think that this bug might be related to #wave8-collect-admins
cc @zanyrenney

[m-natarajan]

@lakchote 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.

[eucool]

Proposal

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

Offline indicator appears below "Members must categorize.." instead of page bottom

What is the root cause of that problem?

we wrap OfflineWithFeedback at wrong place:

App/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx

Lines 36 to 43 in 104565b

	>
	<HeaderWithBackButton title={translate('common.settings')} />
	<OfflineWithFeedback
	errors={policy?.errorFields?.requiresCategory}
	pendingAction={policy?.pendingFields?.requiresCategory as OnyxCommon.PendingAction}
	errorRowStyles={styles.mh5}
	>
	<View style={[styles.mt2, styles.mh4]}>

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

Wrap the whole page instead:

use the OfflineWithFeedback here instead:

App/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx

Lines 28 to 29 in 104565b

	return (
	<AdminPolicyAccessOrNotFoundWrapper policyID={route.params.policyID}>

What alternative solutions did you explore? (Optional)

N/A

[neonbhai]

Proposal

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

Offline indicator appears below "Members must categorize.." instead of page bottom

What is the root cause of that problem?

The ScreenWrapper component here does not take all available space

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

We should pass styles.flexGrow1 to the ScreenWrapper

Alternatively

• We should make ScreenWrapper the outermost component
• We can wrap with a View containing the style flexGrow1