[$125] Web - Onboarding - Onboarding modal's corner become rectangular when hovering over the back button

[IuliiaHerets]

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.30-7
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): nathanmulugetatesting+1383@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Navigate to staging.new.expensify.com
2. Sign up with a new account
3. When the onboarding modal shows up click on something else
4. Hover over the back button and observe the corner of the modal

Expected Result:

Nothing unusual happens to the corners of the onboarding modal

Actual Result:

Corners of the onboarding modal become rectangular first until the tooltip shows up and reverts back to being curved

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6595105_1725610381650.bandicam_2024-09-06_11-08-18-975.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021832074357963924539
• Upwork Job ID: 1832074357963924539
• Last Price Increase: 2024-09-27

[melvin-bot]

Triggered auto assignment to @sakluger (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.

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[IuliiaHerets]

@sakluger FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[sakluger]

This seems like a basic styling issue. I'm going to set the price at $125.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $125

[rlmorrison74]

Just tried to reproduce on mac-chrome, but I'm not experiencing this issue.

Edit: just tried safari as well, looks all good to me.

[melvin-bot]

📣 @rlmorrison74! 📣
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>

[rlmorrison74]

Contributor details
Your Expensify account email: rlmorrison.74@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~010522cfcacf6a249a

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[sandeeppal007]

This issue is caused by a state re-render. When we hover over the back button, the card initially displays the default CSS, which lacks the border-radius property. Once the original CSS loads, the card becomes rounded as intended.

[melvin-bot]

📣 @sandeeppal007! 📣
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>

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[shubham1206agra]

@sakluger Please add retest label. #46788 might have fixed this problem

[melvin-bot]

@akinwale, @sakluger Whoops! This issue is 2 days overdue. Let's get this updated quick!

[sakluger]

Added the retest-weekly label.

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[melvin-bot]

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

[Bakhtiar85]

Proposal

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

The corners of the onboarding modal initially appear rectangular until the tooltip displays, at which point they return to their curved state. Additionally, if the user lightly touches the edge of the back button without pressing further, the corners remain rectangular.

What is the root cause of that problem?

The issue seems to stem from improper styling in the BaseOnboardingPersonalDetails component. This inconsistency causes the modal’s border-radius to temporarily reset.

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

I will adjust the CSS for the BaseOnboardingPersonalDetails component, ensuring the border-radius remains consistent, even when the tooltip appears or when hovering near the back button.

What alternative solutions did you explore? (Optional)

One alternative approach is applying overflow: hidden either to the component itself or to its parent container to control any visual overflow that may be contributing to the issue.

[akinwale]

Still looking for proposals that explain the exact root cause with an appropriate fix suggested.

[ra-md]

Proposal

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

Onboarding modal's corner become rectangular when hovering over the back button

What is the root cause of that problem?

The issue is likely due to a bug in Chromium-based browsers, as it only occurs there. The ScreenWrapper component escapes the boundary despite the parent element having overflow: hidden.

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

Add a border radius (styles.br4) to the ScreenWrapper component in here and in here to help prevent it from visually escaping its parent container.

style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8, styles.br4]}

What alternative solutions did you explore? (Optional)

[sakluger]

Hmm, we never got a retest by QA.

@AttockOffice85 @Bakhtiar85 @ra-md were you all able to reproduce this issue after Sept 9?

[ra-md]

@sakluger Yes, I can still reproduce the issue.

[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 @sakluger this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[akinwale]

@ra-md Do you have a reference or an explanation for the cited bug? Is there an existing bug report filed with Chromium?

[wildan-m]

Issue not replicated in Chrome Version 128.0.6613.139 on macOS. The original poster was using Windows; could this be a Chrome bug specific to Windows? Which Chrome version was utilized by the tester?

[sakluger]

@ra-md could you please clarify which operating system and version of the app you were using when you reproduced the issue? And could you please answer @akinwale's question here? Thanks!

[ra-md]

@akinwale Currently, I don’t have a detailed explanation for the cited bug as reproducing it has been quite difficult. I haven’t found an existing bug report filed with Chromium.

[ra-md]

I was using Ubuntu 22.04 with Chrome version 127.0.6533.119 and Windows 11 23H2 with Chrome version 129.0.6668.59 when I reproduced the issue.

[melvin-bot]

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

[sakluger]

I can't reproduce this one in Mac Chrome (Version 128.0.6613.138). Given the low impact on users and the difficulty in reproduction, I'm going to close this one for now so we can focus on higher impact bugs.