[HOLD for payment on Friday 13th 👻 ] mWeb - Focus on email box is not correctly displayed on the sides of the text input

[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 staging.new.expensify.com
2. Focus on the email input

Expected Result:

Blue line is fully visible in the "Enter you phone or email" box

Actual Result:

Blue line is fully visible in the "Enter you phone or email" box

Workaround:

None needed, visual issue.

Platform:

Where is this issue occurring?

• Mobile Web ✔️

Version Number: 1.0.81-3

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

Notes/Photos/Videos:

Expensify/Expensify Issue URL:

View all open jobs on Upwork

view this job on upwork

[MelvinBot]

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

[aman-atg]

Proposal

• It's a regression caused by Adjust outline for focused elments #4170 for Make outline consistent for all focusable elements in the APP across platforms. #3959 as this replaced the outline with box-shadow of width 1px

• Ultimately, this regression can be fixed here by the use of padding. But this might be happening at other places as well.

• Replacing mh5 with ph5 should fix the issue or we can add padding of 1px to SignInPageInnerNative in styles.js
  

  App/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js

  Line 27 in 609826f

  styles.mh5,

[isagoico]

Issue reproducible during KI retests

[Julesssss]

Yep, seems like this issue was the cause.

[Julesssss]

That issue was not the cause, my bad 😀

CC @parasharrajat as you had some further context.

[aman-atg]

@Julesssss

Strangely enough, I can't reproduce the issue after undoing #4170 's changes

Here are the videos for your reference

withoutChanges.mp4

withPR.mp4

[parasharrajat]

@Julesssss I checked the page design. the approach is a little bit wrong to create the page layout.
here

App/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js

Line 27 in 609826f

styles.mh5,

we have used margin for no reason. Instead, we should use padding in the scroll view for various reasons.
The correct approach is this.

  style={[
            styles.flexGrow1,
            styles.signInPageNarrowContentContainer,
            styles.alignSelfCenter,
        ]}
        contentContainerStyle={styles.ph5}

and we extend the width to 335 for signInPageNarrowContentContainer to encounter padding.
I checked it fixes the issue and does not have any layout break in any Platform.
There are some existing minor UI issues on login. I will tackle them as well.

[MelvinBot]

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