[HOLD for payment 2021-12-27] Workspace settings - Modals are not scrollable in landscape mode - Reported by: @parasharrajat

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Navigate to workspace settings
2. Change the orientation to landscape
3. Click on any of the options

Expected Result:

All modals should be scrollable so users can reach the options in landscape mode.

Actual Result:

Modals are not scrollable and options are not reachable in landscape mode.

Workaround:

Use the app in portrait mode.

Platform:

Where is this issue occurring?

• iOS
• Android
• Mobile Web

Version Number: 1.1.16-10

Reproducible in staging?: Yes
Reproducible in production?: Yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

WhatsApp.Video.2021-11-26.at.11.54.04.AM.mp4

Expensify/Expensify Issue URL:

Issue reported by: @parasharrajat
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1637861287011000

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @Dal-Papa (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[PrashantMangukiya]

Proposed Solution:

We have to replace <View> with <Scrollview> for various page used in workspace settings as under:

Within src/pages/ReimbursementAccount/BankAccountStep.js change line 179

App/src/pages/ReimbursementAccount/BankAccountStep.js

Lines 178 to 179 in 2aaa8fd

	{!subStep && (
	<>

i.e. Change <> to <ScrollView>

---

Within src/pages/workspace/bills/WorkspaceBillsPage.js Change line 27

App/src/pages/workspace/bills/WorkspaceBillsPage.js

Lines 26 to 27 in 85d9a21

	{(hasVBA, policyID) => (
	<>

i.e. change <> to <ScrollView style={[styles.flex1]} contentContainerStyle={[styles.pb5]}>

---

Within src/pages/workspace/card/WorkspaceCardPage.js Change line 28

App/src/pages/workspace/card/WorkspaceCardPage.js

Lines 27 to 28 in 85d9a21

	{(hasVBA, policyID, isUsingECard) => (
	<>

i.e. Change <> to <ScrollView style={[styles.flex1]} contentContainerStyle={[styles.pb5]}>

---

Within src/pages/workspace/invoices/WorkspaceInvoicesPage.js Change line 27

App/src/pages/workspace/invoices/WorkspaceInvoicesPage.js

Lines 26 to 27 in 85d9a21

	{(hasVBA, policyID) => (
	<>

i.e. change from <> to <ScrollView style={[styles.flex1]} contentContainerStyle={[styles.pb5]}>

---

Within file src/pages/workspace/reimburse/WorkspaceReimbursePage.js Change line 27

App/src/pages/workspace/reimburse/WorkspaceReimbursePage.js

Lines 26 to 27 in 85d9a21

	{(hasVBA, policyID) => (
	<>

i.e Change from <> to <ScrollView style={[styles.flex1]} contentContainerStyle={[styles.pb5]}>

---

Within file src/pages/workspace/travel/WorkspaceTravelPage.js Change line 27

App/src/pages/workspace/travel/WorkspaceTravelPage.js

Lines 26 to 27 in 85d9a21

	{(hasVBA, policyID) => (
	<>

i.e. Change from <> to <ScrollView style={[styles.flex1]} contentContainerStyle={[styles.pb5]}>

---

Within file src/pages/workspace/WorkspaceSettingsPage.js Change line 138

App/src/pages/workspace/WorkspaceSettingsPage.js

Lines 137 to 138 in 85d9a21

	{hasVBA => (
	<View style={[styles.pageWrapper, styles.flex1, styles.alignItemsStretch]}>

i.e. Change line 138 from
<View style={[styles.pageWrapper, styles.flex1, styles.alignItemsStretch]}>
to
<ScrollView style={[styles.flex1]} contentContainerStyle={[styles.p5, styles.alignItemsStretch]}>

Not sure but if need we have to do similar changes on other pages if need.

Below is the screen record after this updates:

iOS.mp4

[parasharrajat]

Proposal

1. All the pages of Workspace use WorkspacePageWithSections. There is one issue with the styling of WorkspacePageWithSections wrapper.
2. It does use the ScrollView but makes the content container flex:1 which will block the scrolling.

To fix this

1. We just need to remove the styles.flex1 style from the contentContainerStyle at

   App/src/pages/workspace/WorkspacePageWithSections.js

   Line 77 in 85d9a21

   contentContainerStyle={[styles.flex1]}

It will fix all the pages in one shot.

Apart from it, I can see that there are some duplicate styling used for this component and I will clear it as well. Such as styles.settingsPageBackground is not needed here.

[Dal-Papa]

Sounds like there are good proposals. Slapping the External label on this bad boy.

[MelvinBot]

Triggered auto assignment to @stephanieelliott (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[stephanieelliott]

Posted to Upwork: https://www.upwork.com/jobs/~017a033299ad4b8dff

@Dal-Papa which proposal shall we go with here?

[Dal-Papa]

@stephanieelliott : It looks like @parasharrajat is the one that's more of a long term solution to this problem as opposed to a workaround so I'd go with that.