[HOLD for payment 2022-09-23] [$250] Web - Login - When the page size is reduced, the information on the banner is cut off

[kbecciv]

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. Go to Login page NewDot
2. Decrease the screen width

Expected Result:

When the page size is reduced, the information on the banner is cut off.
Clipped only beige banner.

Actual Result:

Describe what actually happened

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.88.13

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any

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

Notes/Photos/Videos: Any additional supporting documentation

Bug5691712_Recording__1065.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

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

[kakajann]

Proposal

This line:

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

Line 56 in 25a7a90

resizeMode={props.isMediumScreenWidth ? 'contain' : 'cover'}

should be:

resizeMode="contain"

Result

Before

before.mov

After

after.mov

[thesahindia]

@Beamanator, we can close this one as we already have an internal issue for this.

[Beamanator]

@thesahindia good find!

@ctkochan22 any reason you'd prefer making this issue internal? If this is just a styling thing let's make it external, but if there's other considerations please let me know :D

[melvin-bot]

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

[ctkochan22]

Lets handle this issue here.

[ctkochan22]

I don't think just switching it to contain works. We use "cover" so that when the area is larger than the image, it scales up accordingly. If we just applied "contain" it would not do so.

@shawnborton I introduced this bug originally here: #7771 (sorry). I think the issue is that the graphic/text for the CPA image is closer to the margin than the usual background images.

• We are pulling the images here:

  App/src/styles/StyleUtils.js

  Line 379 in a70aa0c

  backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/cpa-card.svg`,

• When we reach a certain screen width, isMediumScreenWidth we switch the <Image> component's "resizeMode" from "cover" to "contain":

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

  Line 56 in a0c8daf

  resizeMode={props.isMediumScreenWidth ? 'contain' : 'cover'}

I think the issue is that isMediumScreenWidth turns true after we cut off the CPA banner.

Solutions include,

1. having a stricter cut-off for the login page. Specifically for the CPA banner.
2. editing the image itself to give it more berth
3. Maybe give the CPA image margin on the right