1711860 - The distance between Theme options from the third slide of the “about:welcome” page is inconsistent

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P2)

Description

[Simona Rosu [:srosu], Ecosystem QA]

Attachment: Distance_ThemeOptions.png

[Affected versions]:

• Firefox Nightly 90.0a1 (Build ID: 20210518213628)
• Firefox Beta 89.0b14 (Build ID: 20210518190425)

[Affected Platforms]:

• Windows 10 x64
• Linux Mint 20
• MacOS 11.2.3

[Prerequisites]:

• Have Firefox Beta 89.0b14/Nightly 90.0a1 installed.
• Have created a new Firefox profile.

[Steps to reproduce]:

1. Open the Firefox profile from prerequisites.
2. Click on the “Not now” buttons from the first and second slides of the “about:welcome” page.
3. Observe the distance between the theme options.

[Expected result]:

• The theme options are correctly displayed and the distance between them is the same.

[Actual result]:

• The distance between the "System theme" and the "Light" options, and the one between the "Dark" and the "Alpenglow" options is bigger than the distance between the "Light" and the "Dark" options.

[Notes]:

• This issue is not reproducible for existing users.
• Attached a screenshot of the issue.

Comment 1

[Ed Lee :Mardak]

Maybe this could be better as flex instead of grid? Although not quite sure how it will behave if we need to wrap:
https://searchfox.org/mozilla-central/rev/443f87caa5fadba920b0382e12874693d6c6133a/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss#173-180

Comment 2

[Ed Lee :Mardak]

Attachment: Bug 1711860 - Use even spacing between about:welcome theme options r?pdahiya

Switch themes to flex to allow items to be equally sized and evenly spaced. Allow wrapping for pre-proton design.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/29ea57063ab8
Use even spacing between about:welcome theme options r=pdahiya

Comment 4

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/29ea57063ab8

Comment 5

[Simona Rosu [:srosu], Ecosystem QA]

I have verified this issue using the latest Nightly 90.0a1 (Build ID: 20210526211756) on Windows 10 x64, Ubuntu 20.04 and macOS 11.2.3.

• The distance between Theme options from the third slide of the “about:welcome” page is equal.