Closed Bug 1575523 Opened 2 years ago Closed 2 years ago

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

Categories

(Firefox :: Messaging System, defect, P1)

defect

Tracking

()

VERIFIED FIXED
Firefox 70
Iteration:
70.4 - Aug 19 - Sep 1
Tracking Status
firefox-esr60 --- unaffected
firefox-esr68 --- unaffected
firefox68 --- unaffected
firefox69 --- wontfix
firefox70 --- verified

People

(Reporter: acupsa, Assigned: emcminn)

References

(Regression)

Details

(Keywords: github-merged, regression)

Attachments

(3 files, 1 obsolete file)

[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.

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.

Flags: needinfo?(emcminn)
Regressed by: 1571441

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

Attached image rtl narrow
Attachment #9087115 - Attachment is obsolete: true

(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!

Flags: needinfo?(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?

Flags: needinfo?(abenson)
Assignee: nobody → emcminn

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.

Flags: needinfo?(abenson)

(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 :)

Priority: -- → P1
Depends on: 1576207
Blocks: 1576284
Status: NEW → RESOLVED
Iteration: --- → 70.4 - Aug 19 - Sep 1
Closed: 2 years ago
Keywords: github-merged
Resolution: --- → FIXED
Target Milestone: --- → Firefox 70

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.

Status: RESOLVED → VERIFIED

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.

Has Regression Range: --- → yes
You need to log in before you can comment on or make changes to this bug.