[$250] iOS - Scroll bar is moved to the left side and is overlapping with elements

[izarutskaya]

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: 9.0.38-0
Reproducible in staging?: Y
Reproducible in production?: Y
Found when validation PR: #49239
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Open the app
2. Log in with any Gmail account
3. Tap on Navigate to Search - Filters - Date
4. Scroll up and down

Expected Result:

Scroll bar should be on the right side of the app, next to the edge.

Actual Result:

Scroll bar is moved to the left side and is overlapping with elements.

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

Bug6608505_1726725911665.FCJW3271.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021837166890649438945
• Upwork Job ID: 1837166890649438945
• Last Price Increase: 2024-09-20
• Automatic offers:
• ishpaul777 | Contributor | 104058249
• ChavdaSachin | Contributor | 104061970

Issue Owner

Current Issue Owner: @ishpaul777

[melvin-bot]

Triggered auto assignment to @abekkala (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

📣 @websquadpro! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[izarutskaya]

We think this issue might be related to the #collect project.

[ChavdaSachin]

Edited by proposal-police: This proposal was edited at 2024-09-19 11:32:49 UTC.

Proposal

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

• IOS scrollbar overlaps with content on - search > Filters > Date page.

What is the root cause of that problem?

• [$125] Scroll bar is on the left side on Wallet page #48769 (comment)
• Same RCA as above issue - migrating to useOnyx from withOnyx solves this problem.

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

• migrating FormProvider and FormWrapper from withOnyx to useOnyx solves the issue.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[zfurtak]

Hey! I’m Zuzanna Furtak from Software Mansion, an expert agency, and I’d like to work on this issue! Our team has been working on the search filters, so it should be a smooth process to debug them.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

📣 @ishpaul777 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer 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 📖

[abekkala]

Not sure why Melvin unassigned you @ishpaul777 You are the reviewer on this one.
@zfurtak will be creating a fix

[abekkala]

Actually - @ishpaul777 can you first review the proposal that came in first.

Because that one was submitted first can you see if it's acceptable? If not then I can asisgn zfurtak to take this on

[ishpaul777]

sure, it looks acceptable, since a similar issue was solved with same approach, @ChavdaSachin would you mind sharing a test branch with your solution, Thanks!

[ChavdaSachin]

@ishpaul777 in a while I will share

[ishpaul777]

if it fixes the issue and there's no side effects, we'll assign you ofc.

BTW we are already migrating FormWrapper in this PR #49358 but i have not noticed any PR that migrates FormProvider so that is something we can still do assuming it fixes this issue and no other PR migrating it is merged before ours

[ishpaul777]

I tried reproducing this on my device it seems i could not reproduce the issue Scrollbar is on right as expected

trim.48775509-B775-4920-8C85-72F3152F37F6.MOV

[ChavdaSachin]

Here's my test branch - https://github.com/ChavdaSachin/App/tree/fix-49456 (I took FormWrapper from #49358)

Note

Issue is generally reproducible if date page is loading for the first time, easily reproducible on emulator

Before

Screen.Recording.2024-09-21.at.12.43.44.AM.mov

After

Screen.Recording.2024-09-21.at.12.36.37.AM.mov

[ishpaul777]

Thanks for sharing branch, in your video and my testing on simulator it appears the that scroll is still on right but slight off and overlaps content for first time page loads. which i can verify is fixed with the migration from withOnyx -> useOnyx

Before:

Screen.Recording.2024-09-21.at.1.35.42.AM.mov

After:

Screen.Recording.2024-09-21.at.1.34.38.AM.mov

TBH, i am still confused how withOnyx is affecting scrollbar.

[289Adam289]

Hi! I am Adam from SWM, an expert agency and I'd like to work on this issue.

[289Adam289]

While working on this issue I've noticed that storybook is not working even on main. I think fixing it is outside of the scope of this pr and it may require opening another issue.

[ishpaul777]

Can we create a issue for this ^ @chiragsalian, not sure if we missing any thing in setup asked here https://expensify.slack.com/archives/C02NK2DQWUX/p1727459623902909

[chiragsalian]

Can we create a issue for this

Is it the same as the issue reported here - #40041. Looks related right? And it looks like that issue is on hold for something else.

[ishpaul777]

Nah, i think that is issue related with deployement of storybook, it should be running fine locally according to this https://expensify.slack.com/archives/C049HHMV9SM/p1714082116667919?thread_ts=1714064859.296509&cid=C049HHMV9SM (#40041 (comment))

[melvin-bot]

Triggered auto assignment to @lschurr (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[abekkala]

@lschurr I'm going ooo until Oct 20. Assigning a BZ buddy to this until I return and I can take it back

STATUS: This is on HOLD with current discussion on how to get to a fix.

[ishpaul777]

Actually the issue in OP is fixed, so this should be ready for payment.

---

we were discussing a different issue that storybook is broken locally, so i beleive its not a priorty to fix since its broken on deployement. right? @chiragsalian

[chiragsalian]

the issue in OP is fixed, so this should be ready for payment.

Correct yes. Actually i just noticed the title has a HOLD on it. That's a mistake, clearing it.

we were discussing a different issue that storybook is broken locally, so i beleive its not a priorty to fix since its broken on deployement. right?

Yup i agree too. The storybook is a different issue. Our most recent discussion is if the storybook issue should be merged with #40041 or if a new issue should be created. This is a post discussion. The code to solve this GH issue is resolved and was live 3 weeks back. @lschurr or @abekkala, can you handle payment.

i think that is issue related with deployement of storybook, it should be running fine locally according to this

Weird, okay I've created another issue. Can you fill in the details when you get a chance @ishpaul777.

[abekkala]

I'm back from ooo - unassigning @lschurr

[ishpaul777]

Thanks for creating issue @chiragsalian, it seems good nothing for me to add, i'll review proposals there Thanks!

[melvin-bot]

@abekkala, @chiragsalian, @ishpaul777, @289Adam289 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@abekkala, @chiragsalian, @ishpaul777, @289Adam289 Eep! 4 days overdue now. Issues have feelings too...

[abekkala]

Oh I just realized there was a payment comment prior to me unassigning @lschurr

@ishpaul777 can you link the PR that fixed the OP here?
I'd like to grab the names that require payment
then we can close this one out

[ishpaul777]

This one #49700,

@289Adam289 (SWM) PR author
@ishpaul777 (me) C+ role

[abekkala]

PAYMENT SUMMARY

Fix: @289Adam289 - swm, no upwork payment needed
PR Review: @ishpaul777 [$250] Offer