1790110 - [foxfooding] Colorways promo takes up a lot of space on smaller screen widths

Status: VERIFIED FIXED

(Firefox :: Firefox View, defect, P3)

Description

[Peter deHaan [:pdehaan]]

Attachment: Screen Shot 2022-09-09 at 9.03.38 AM.png

Firefox Version: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
Window Size (inner width and height): 1920x919
GitHub Username: @lime124

Steps to Reproduce

i do split screen a lot on my mac, so windows appear side by side. and this is the layout when the width of the view tab is reduced. i'm not sure if this is the intended layout - with the colorways promo in between the two bits of content. i would think it would appear at the top on narrower viewports.

secondly - if the colorway promo is meant to be between pickup and closed sections, the spacing between the promo and the closed section feels really wide.

Expected Behavior

Less of a gap between sections on smaller page widths.

Actual Behavior

Large vertical gap between Independent Voices and Recently closed sections on smaller page widths

Attachment

Link to the original attachment

Comment 1

[Kelly Cochrane [:kcochrane]]

Attachment: FigmaSpec

According to the Figma spec, it looks like the Colorways section should be displayed between Tab pickup and Recently closed on smaller screens.

Comment 2

[Kelly Cochrane [:kcochrane]]

Attachment: Bug 1790110 - Removing margin bottom for Colorways figure on smaller screens r?dao

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1844b1b74815
Removing margin bottom for Colorways figure on smaller screens r=dao

Comment 4

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/1844b1b74815

Comment 5

[Kelly Cochrane [:kcochrane]]

Comment on attachment 9295272 [details]
Bug 1790110 - Removing margin bottom for Colorways figure on smaller screens r?dao

Beta/Release Uplift Approval Request

• User impact if declined: There will be excess vertical spacing between 'Colorways' and 'Recently close tabs' sections on smaller screens
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• 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): Not risky as it's just a small css change
• String changes made/needed:
• Is Android affected?: No

Comment 6

[Pascal Chevrel:pascalc]

Comment on attachment 9295272 [details]
Bug 1790110 - Removing margin bottom for Colorways figure on smaller screens r?dao

Approved for 106 beta 2, thanks.

Comment 7

[Pascal Chevrel:pascalc]

https://hg.mozilla.org/releases/mozilla-beta/rev/5a71177b0589

Comment 8

[Gabi Cheta [:Gabi] Desktop QA]

Verified as fixed with Nightly 107.0a1 and Firefox 106.0b2 on smaller screens Ubuntu 18.4, macOS 10.12 and Windows 10x64.