[HOLD App#53186] [$250] Android - Workspace overview buttons are cut off at the bottom

[lanitochka17]

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.89-2
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause - Internal Team
**Component:**Workspace Settings

Action Performed:

1. Navigate to hybrid app (Android)
2. Create WS
3. Navigate to overview
4. Notice the bottom buttons ( invite, share and Delete)

Expected Result:

The buttons should be visible fully

Actual Result:

Those buttons are cut off at the bottom
Reproducible using Samsung Galaxy A15 5G/Android and Samsung galaxy s10 5G /Android

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• 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/~021882576269780243662
• Upwork Job ID: 1882576269780243662
• Last Price Increase: 2025-01-30

Issue Owner

Current Issue Owner: @akinwale

[melvin-bot]

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

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

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

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

[melvin-bot]

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

[jasperhuangg]

This is pretty minor and doesn't prevent the user from using the App, I don't think it's worth blocking deploy on this, although finding the PR that caused this issue is still good.

[jasperhuangg]

I'm not really seeing anything in the blocker list that would point to this issue, I'm asking for a retest to see the behavior on prod.

[rohit9625]

On Android Chrome, we can scroll down to see those buttons, which is how the website works.

[rohit9625]

Proposal

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

Workspace overview buttons are cut off at the bottom on Android.

What is the root cause of that problem?

The default value of includeSafeAreaPaddingBottom is false for the WorkspacePageWithSections component. Since we do not pass this prop here:

App/src/pages/workspace/WorkspaceProfilePage.tsx

Lines 185 to 195 in aa849f1

	<WorkspacePageWithSections
	headerText={translate('workspace.common.profile')}
	route={route}
	guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_PROFILE}
	// When we create a new workspaces, the policy prop will not be set on the first render. Therefore, we have to delay rendering until it has been set in Onyx.
	shouldShowLoading={policy === undefined}
	shouldUseScrollView
	shouldShowOfflineIndicatorInWideScreen
	shouldShowNonAdmin
	icon={Illustrations.Building}
	shouldShowNotFoundPage={policy === undefined}

Causing the bottomNavigationBar to overlap buttons on Overview Page. The behavior is the same on Android Standalone App also.

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

We should pass the includeSafeAreaPaddingBottom prop to ensure the bottom navigation buttons don't overlap the content of the overview page.

SafeAreaPadding_Demo.mp4

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

Since it's a UI-related change, we cannot cover this in automated tests.

What alternative solutions did you explore? (Optional)

Since the user still needs to scroll down to see the buttons completely, we can handle the shouldUseScrollView along with includeSafeAreaPaddingBottom like this:

const shouldUseScrollView = Browser.isMobile(); // Use scroll view on mobile web
<WorkspacePageWithSections
            // Other props
            shouldShowLoading={policy === undefined}
            shouldUseScrollView={shouldUseScrollView}
            includeSafeAreaPaddingBottom
           // Other props

However, shouldUseScrollView={false}, causing the description section to disappear. I doubt if this is the desired behavior to allocate more space by removing the description. If not, then we can show the description as Overflow Elipsis.

[akinwale]

Looks like a screen resolution issue resulting in the items on the page to not being displayed completely without scrolling. @rohit9625's proposal can work here.

🎀👀🎀 C+ reviewed.

[melvin-bot]

Triggered auto assignment to @Beamanator, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[Beamanator]

If this came from #55285, I wonder if @bernhardoj should take a look at implementing the fix?

But @jasperhuangg is already assigned here so I'll run away 🏃 😅

[akinwale]

If this came from #55285, I wonder if @bernhardoj should take a look at implementing the fix?

But @jasperhuangg is already assigned here so I'll run away 🏃 😅

That PR is related to updating the focus trap package, which is unrelated to the view's ability to scroll on overflow. @bernhardoj Could you please take a look and confirm? Thanks.

[Beamanator]

Okkk asked just b/c it seems like this issue was created while QAing that PR, but that doesn't mean they're necessarily related :D

[melvin-bot]

@akinwale, @jasperhuangg Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@akinwale, @jasperhuangg 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[shubham1206agra]

@jasperhuangg Can you hold the assignment here since this is a dupe of https://expensify.slack.com/archives/C049HHMV9SM/p1736360325497079?thread_ts=1736238279.772929&cid=C049HHMV9SM

cc @mountiny

[melvin-bot]

@akinwale, @jasperhuangg Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!