[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 [email protected] 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.

[stephanieelliott]

Assigned to @parasharrajat - can you post to the Upwork job when you get a chance so I we can hire you? https://www.upwork.com/jobs/~017a033299ad4b8dff

[MelvinBot]

📣 @parasharrajat You have been assigned to this job by @stephanieelliott!
Please apply to this job in Upwork and let us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[hiteshagja]

Proposed Solution:

1. Content Contain has some incorrect styling and we have just made minor changes to make it work. Refer screenshot for the comparison of old and new code.

2. There are 2 menu items which are not using this container and have different container styles so we need to add ScrollView for them. I have done for one of the item i.e. “Connect bank account”.
   
   

[parasharrajat]

@hiteshagja This is already being worked on. Thanks for the proposal and for pointing out that I missed the Bank account pages.

[Dal-Papa]

I think the work has been done but has yet to be deployed. Will move this to Weekly so Melvin can chill.

[marcaaron]

Just a heads up that the most recent changes broke the VBA flow. I don't really have the full context here - but this is blocking the Plaid OAuth changes from getting deployed to production and causing a bit of mayhem... so I am creating a PR to undo the changes added.

It's not a clean revert so @parasharrajat you'll have to come back and re-try to make whatever changes you intended to make to the WorkspaceBankAccountPage in order to close out this ticket.

[parasharrajat]

This issue got closed accidentally. The new PR is here #6648 for one last page which got reverted earlier.

[parasharrajat]

Could we please reopen this? It's awaiting payment and exported label.

[MelvinBot]

Current assignee @parasharrajat is eligible for the Exported assigner, not assigning anyone new.

[MelvinBot]

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

[stephanieelliott]

@parasharrajat can you grab the Upwork job when you get a chance so I can hire you: https://www.upwork.com/jobs/~017a033299ad4b8dff

[parasharrajat]

Sorry, @stephanieelliott I missed the earlier ping. Applied now.

[botify]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.21-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Make bank account page scrollable #6648

If no regressions arise, payment will be issued on 2021-12-27. 🎊

[laurenreidexpensify]

@parasharrajat $500 paid - $250 for reporting, $250 for solution