Closed Bug 1651727 Opened 3 months ago Closed 3 months ago

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

Categories

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

80 Branch
defect

Tracking

()

VERIFIED FIXED
Firefox 80
Tracking Status
firefox-esr68 --- unaffected
firefox-esr78 --- unaffected
firefox78 --- unaffected
firefox79 --- verified
firefox80 --- verified

People

(Reporter: mcrawford, Assigned: kenrick95)

References

(Regression)

Details

(Keywords: regression)

Attachments

(5 files)

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.

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

Displaying incorrectly on Nightly 80.0a1 (Actual)

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

Severity: -- → S3
Flags: qe-verify+
Flags: needinfo?(kenrick95)
Keywords: regression
Priority: -- → P3

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

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

Flags: needinfo?(kenrick95) → needinfo?(mcrawford)

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.

Flags: needinfo?(mcrawford)

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

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

Assignee: nobody → kenrick95
Status: NEW → ASSIGNED
Regressed by: 1626215

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
Attachment #9162714 - Flags: approval-mozilla-beta?
Pushed by mozilla@noorenberghe.ca:
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
Status: ASSIGNED → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 80
QA Whiteboard: [qa-triaged]

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.
Status: RESOLVED → VERIFIED
QA Whiteboard: [qa-triaged]
Flags: qe-verify+

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.

Attachment #9162714 - Flags: approval-mozilla-beta? → approval-mozilla-beta+

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.
You need to log in before you can comment on or make changes to this bug.