[HOLD for payment 2021-12-27] Workspace - UI is breaking on invite members page on mobile - Reported by: @thesahindia

[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 page
2. Click on invite member
3. Click on the invite button
4. Tap on the search field

Expected Result:

UI should be displayed without any overlapping or weirdness

Actual Result:

UI looks broken and in small screen devices it overlaps with the search box.

Workaround:

None needed - visual issue.

Platform:

Where is this issue occurring?

• iOS
• Android
• Mobile Web

Version Number: 1.1.17-0

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

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

Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2021-12-06.at.4.52.05.PM.mov

Expensify/Expensify Issue URL:

Issue reported by: @thesahindia
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1638789938237200

View all open jobs on GitHub

[MelvinBot]

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

[chiragsalian]

Shall investigate today.

[chiragsalian]

Not sure if this is worth addressing since it seems minor and affecting mobiles with a really small screen space.
I just tried it on iOS and its fine,

Do we know which android mobile this is? @isagoico is your team able to reproduce this issue on other iOS devices and/or android devices. If so can you share which models are affected by this issue?

[isagoico]

Seem like this is affecting only small screen devices - when checking on my side I was unable to reproduce on both my iOS and Android device (Huawei P20 Pro - iPhone 6S). I will ask the team if they're able to reproduce but imo very few mobile devices are going to be affected by if this is not even reproduced on iPhone 6S.

@thesahindia Can you clarify which device were you emulating when raising this issue in the contributor channel?

[thesahindia]

Yeah it was nexus 6. This time i tried on pixel 2

i think we should work on this as it's hard to select people while searching.
we should make it scrollable like we did for the component below :-

Screen.Recording.2021-12-09.at.11.57.48.AM.mp4

[chiragsalian]

Ah, I thought the primary issue was the message field overlapping over the invite member input field.
To be clear the member selection area is scrollable pretty similar to the connect bank account but yes we should,

1. Make the message box scrollable. It's scrollable on web so we must've missed making it scrollable on mobile too.
2. Make the box fit atleast 3 lines comfortably. Atm, i see the topmost line cut off a little bit.
   

@thesahindia, would you like to work on this task 🙂
If so can you share a proposal?

[MelvinBot]

Triggered auto assignment to @parasharrajat (Exported)

[MelvinBot]

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

[MelvinBot]

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

[thesahindia]

Proposal

@chiragsalian Researched a little bit and found out that this PR added height:100% here and after removing that it becomes scrollable for the native platform as well and found no regressions while testing

App/src/styles/styles.js

Lines 638 to 643 in 9efb4d5

	expensiTextInput: {
	fontFamily: fontFamily.GTA,
	fontSize: variables.fontSizeNormal,
	lineHeight: variables.fontSizeNormalHeight,
	color: themeColors.text,
	height: '100%',

Here's a demo :-

Screen.Recording.2021-12-10.at.12.39.31.AM.mp4

[parasharrajat]

Looks like that will work. @thesahindia your proposal looks good.

But this issue does not look like the correct place to track this issue Instead it has a dedicated issue #6671 (comment).

cc: @chiragsalian

🎀 👀 🎀

[thesahindia]

@parasharrajat thanks for the heads-up

[chiragsalian]

Hmm I think this issue is fine because #6671 was created just 2 hours back so if anything i feel like thats the dupe issue since this one was older.

The description UI here wasn't as clear as whats mentioned in #6671 but since we already noted it here I think we're fine considering #6671 as dupe and closing it out. I'm going to close it now.

@Christinadobrzyn let us know once your create the task in upwork so that @thesahindia can apply for it. Meanwhile feel free to create a PR @thesahindia and test it on mobile and web please. Thank you 🙂

[Christinadobrzyn]

Job posted in Upwork -

Internal - https://www.upwork.com/ab/applicants/1469126956000698368/job-details
External - https://www.upwork.com/jobs/~018857ea91e134d764

Hired @thesahindia in Upwork!

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

📣 @thesahindia You have been assigned to this job by @Christinadobrzyn!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[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 workspace message scrollable #6695

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

[laurenreidexpensify]

@thesahindia paid - @250 for reporting, $250 for solution