1651727 - The Mobile Promotion banner not wrapping correctly on the “about:logins” page

Status: VERIFIED FIXED

(Firefox :: about:logins, defect, P3)

Description

[Maxx Crawford [:maxx]]

OS: MacOS Catalina (10.15.5)
Fx Version: 80.0a1

The Mobile Promotion banner is wrapping the app store icons, when they should be side-by-side.

Comment 1

[Maxx Crawford [:maxx]]

Attachment: Screenshot of correctly displayed Mobile Promotion banner

Here it is displaying as expected on Release 78.0.2 (Expected)

Comment 2

[Maxx Crawford [:maxx]]

Attachment: Screenshot of incorrectly displayed Mobile Promotion banner

Displaying incorrectly on Nightly 80.0a1 (Actual)

Comment 3

[Matthew N. [:MattN]]

Hi kenrick, I wonder if this was caused by your recent patch. Either way would you be interested in fixing it?

Comment 4

[Maxx Crawford [:maxx]]

Steps to reproduce:

Prerequisites:

• User must be logged into FxA
• signon.management.page.hideMobileFooter must be false.
  • This promotion banner is displayed to logged-in users until they click the "X" to dismiss it.

Steps:

• Go to about:logins

Comment 5

[kenrick95]

Attachment: Checking the width of the footer-element

I think this is because of bug 1626215, which makes the store buttons wrapped to the next line when the footer width is smaller (because of smaller window screen or other reasons).

Would you help to inspect the footer element (when the buttons is wrapped on the next line) and report back the width that you see? Thanks

Comment 6

[Maxx Crawford [:maxx]]

Attachment: footer-element-width.png

Please see attached. It looks like it's the same width - 700 x 131.

I was playing with the styles and reducing the padding-inline-end attribute by 10px fixes it.

Comment 7

[kenrick95]

Interesting 😂 Let me play around and find a way to consistently reproduce this on my side to find the root cause & fix it.

Comment 8

[kenrick95]

Attachment: Bug 1651727 - Fix store buttons getting wrapped into the next line due to different font width depending on system. r?MattN

Removing padding-inline-end and margin-inline-end on both p and .buttons makes them more resilient to different default system fonts

Comment 9

[Matthew N. [:MattN]]

Comment on attachment 9162714 [details]
Bug 1651727 - Fix store buttons getting wrapped into the next line due to different font width depending on system. r?MattN

Beta/Release Uplift Approval Request

• User impact if declined: about:logins footer when signed into sync wraps and has too much space on the right
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Just removes some padding to allow flexibility for different font (sizes)
• String changes made/needed: None

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/acccafafff66
Fix store buttons getting wrapped into the next line due to different font width depending on system. r=MattN

Comment 11

[Atila Butkovits]

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

Comment 12

[Simona Rosu [:srosu], Ecosystem QA]

I have verified this issue using the latest Firefox Nightly 80.0a1 (Build ID: 20200712214458) on Windows 10 x64, Ubuntu 18.04, and Mac 10.15.

• The Mobile promotion is correctly displayed on the “about:logins” page.
• The store buttons are no longer wrapped to the next line when navigating to the “about:logins” page.
• The store buttons are wrapped to the next line only when the browser is resized less than 70% from its width.

Comment 13

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9162714 [details]
Bug 1651727 - Fix store buttons getting wrapped into the next line due to different font width depending on system. r?MattN

Simple CSS fix. Approved for 79.0b8.

Comment 14

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/3f6b363eaaf9

Comment 15

[Simona Rosu [:srosu], Ecosystem QA]

I have verified this issue using the Firefox Beta 79.0b8 (Build ID: 20200714212005) on Windows 10 x64, Ubuntu 18.04, and Mac 10.15.

• The Mobile promotion is correctly displayed on the “about:logins” page.
• The store buttons are no longer wrapped to the next line when navigating to the “about:logins” page.
• The store buttons are wrapped to the next line only when the browser is resized less than 70% from its width.