1792535 - [New users] The “Sign in” button disappears when zooming in the browser at 170%

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P3)

Description

[Simona Rosu [:srosu], Ecosystem QA]

Attachment: SignIn_Zoom.gif

[Affected versions]:

• Firefox Nightly 107.0a1 (Build ID: 20220926213808)
• Firefox Beta 106.0b4 (Build ID: 20220925185751)

[Affected Platforms]:

• macOS 12.5.1
• Windows 10 x64
• Ubuntu 20.04 x64

[Prerequisites]:

• Have the latest version of the Firefox Nightly/Beta build installed and opened.
• Have the browser maximized.

[Steps to reproduce]:

1. Navigate to the “about:welcome” page.
2. Zoom in the browser at 170%. (or 133% on smaller screens)
3. Observe the elements from the “about:welcome” screen.

[Expected result]:

• All the elements are visible.

[Actual result]:

• The “Sign in” button is not visible.

[Notes]:

• Attached is a screen recording of the issue.

Comment 1

[Shane Hughes [:aminomancer]]

Attachment: Recording of a patch

This appears to be intentional, but I drafted an alternative solution that may be preferable. Currently it's hiding the top CTA within some window dimensions to prevent it from overlapping with the screen. Instead of hiding it, under the same conditions we can just change its positioning so that instead of being aligned to the top right of the window, it's aligned to the top right of the screen. It's basically a design call so NI Ania for guidance.

Comment 2

[Shane Hughes [:aminomancer]]

Attachment: Bug 1792535 - Responsive position for AboutWelcome top CTA. r=pdahiya!

The Sign In button on about:welcome is currently hidden when it would
overlap with the screen. This patch changes the CSS so that instead of
hiding it, we reposition it when it would overlap, aligning it to the
top right of the screen.

Comment 3

[Ania]

My apologies for dropping the ball on this. I think the prototype looks really good, and it's a great solution for this corner case.

Comment 4

[Punam Dahiya [:pdahiya]]

Patch attached is going to fix the corner case reported in the bug by always showing SignIn link on first screen in responsive mode which as per figma hides the link.

https://phabricator.services.mozilla.com/D158207#5203093

NI @ania, @gabrielle to confirm this enhancement as desired

Comment 5

[Punam Dahiya [:pdahiya]]

Attachment: Sign In responsive mode.png

Comment 6

[Ania]

This looks great, thank you so much!

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c54a9687319a
Responsive position for AboutWelcome top CTA. r=pdahiya

Comment 8

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/c54a9687319a

Comment 9

[BugBot [:suhaib / :marco/ :calixte]]

The patch landed in nightly and beta is affected.
:aminomancer, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox106 to wontfix.

For more information, please visit auto_nag documentation.

Comment 10

[Simona Rosu [:srosu], Ecosystem QA]

I‘ve verified this issue using the latest Firefox Nightly 107.0a1 (Build ID: 20221012094509) on Windows 10 x64, macOS 12.5.1, and Linux Mint 20.2 x64.

• The "Sign in" link is repositioned in the upper right corner of the modal when resizing the browser and would overlap the screen.