1575523 - The “Special Monitor” snippet is wrongly resized when horizontally minimizing the browser below 25%

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P1)

Description

[Andreea Cupsa [:acupsa], Experiments QA]

Attachment: Monitor Snippet elements at resize.gif

[Affected versions]:

• Firefox Beta 69.0b15 - Build ID: 20190819184224
• Firefox Nightly 70.0a1 - Build ID: 20190820215247

[Affected Platforms]:

• All Windows
• All Mac
• All Linux

[Prerequisites]:

• Have a new Firefox profile with the browser.newtabpage.activity-stream.asrouter.devtoolsEnabled pref's value set to true in the "about:config" page;

[Steps to reproduce]:

1. Open the browser with the profile from the prerequisites.
2. Navigate to "about:newtab#asrouter" and select the "snippets_local_testing" option from the "Messages" dropdown menu.
3. Scroll to the bottom of the page and click the "Show" button from the "SPECIAL_SNIPPET_MONITOR" section.
4. Click the "Collapse devtools" button from the top-right part of the page.
5. Horizontally minimize the browser below 25% of its full size.
6. Observe the "Special Monitor" snippet's elements.

[Expected result]:

• All the snippet's elements are correctly rendered and visible.

[Actual result]:

• The “Special Monitor” snippet card is narrower than the “Search” bar.
• The “Dismiss” button is displayed outside the “Special Monitor” snippet card.
• The “Get monitor” button is not centered with the other elements from the “Special Monitor” snippet card.

[Notes]:

• Attached a screen recording of the issue.

Comment 1

[Marius Coman [:mcoman], Ecosystem QA]

After further investigation, we found out that this issue is also reproducible with all the "below Search Bar" snippets. Also, it looks like a regression considering the fact that this issue is not reproducible with the "Special FxA" snippet. However, we have not managed to find a regression window because we've hit Bug 1571441.

Comment 2

[Ed Lee :Mardak]

emcminn, is this the expected behavior? The PR for bug 1571441 adds the margin for the 865px width:

https://github.com/mozilla/activity-stream/commit/70b6323072f2c801635e453e2e00f2bdb6e1830a#diff-bc76e98a11e5156a4620ab63e89fb961R77-R78

Comment 3

[Ed Lee :Mardak]

Also the margin: 0 60px 0 0; doesn't work for RTL.

Comment 4

[Ed Lee :Mardak]

Attachment: rtl narrow

Comment 5

[Ed Lee :Mardak]

Attachment: rtl narrow

Comment 6

[Emily McMinn :emcminn]

(In reply to Ed Lee :Mardak from comment #3)

Also the margin: 0 60px 0 0; doesn't work for RTL.

That should be changed for inset-inline-end; I can fix that!

Comment 7

[Emily McMinn :emcminn]

I think Aaron felt that we shouldn't be supporting the narrowest width as far as the Snippets go - I can put in some fixes if that's changed though :)
Any strong feelings, Aaron?

Comment 8

[Aaron Benson]

We have all sorts of problems at the really narrow breakpoints. In my opinion we should stop being responsive at a reasonably low breakpoint (say 800px but that's just a guess atm). We decided not to hide it altogether over concerns we'd need to track that and it created more work. Generally I think this is fine as nobody is going to scale the window down to this size to actually use the page for its intended purpose.

Comment 9

[Emily McMinn :emcminn]

(In reply to Aaron Benson from comment #8)

We have all sorts of problems at the really narrow breakpoints. In my opinion we should stop being responsive at a reasonably low breakpoint (say 800px but that's just a guess atm). We decided not to hide it altogether over concerns we'd need to track that and it created more work. Generally I think this is fine as nobody is going to scale the window down to this size to actually use the page for its intended purpose.

I've put together a quick patch that just sets all the margins to auto at the lowest breakpoint (about 610px) - it's a fairly small change and solves most of the positioning issues, so if that's enough we can probably consider this closed :)

Comment 10

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/activity-stream/pull/5271

Comment 11

[Ed Lee :Mardak]

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

Comment 12

[Andreea Cupsa [:acupsa], Experiments QA]

I have verified this issue and is no longer reproducible on Nightly (ID Build: 20190825213650) on Windows 10 x64, Mac 10.14.5 and Arch Linux 4.16.6 x64.

Comment 13

[Ryan VanderMeulen [:RyanVM]]

Given that we're building the Fx69 RC today and this sounding pretty edge-case, I think we can let this fix ride with Fx70.