UX created a spec for a 3x6 grid of colorway themes in about:addons: https://www.figma.com/file/blhdnzQOhWYKcdiCzywMuG/MR2-Onboarding?node-id=567%3A58950. We should see if we can make a safe (ideally CSS-only) patch to uplift that gives us such a grid. At narrow widths we should show the themes in a 1x18 grid like we do now.

[Tracking Requested - why for this release]:
Improves the presentation of the new themes in about:addons. Expected to be a low-risk patch.

From Product:

The proposed scope would be:

• duplicate the color theme to make it appear in the enabled section at the top when enabled
• adjust positioning of labels/buttons in the smaller theme cards as suggested by Ryan

The first point refers to prototype written by Mark Streimer atop Amy's patch. Its here: https://hg.mozilla.org/try/rev/322360dcfbedd382f86f1dff3d189965eda9ee0e

The second point refers to a spec for the flex layout inside the card created by Ryan Casey, which is attached.

This will need QA verification when complete. We spoke to QA and they can take on this extra scope.

Oana, heads up. This coming soon. you can get a sneak peek in the try build mentioned above.

Comment on attachment 9244287 [details]
Bug 1733632 - Update colorways section in about:addons to be a 3x6 grid. r?harry

Beta/Release Uplift Approval Request

• User impact if declined: The new "Colorways" section in about:addons#themes is currently a long list. This change styles that list into a more readable grid layout that is less overwhelming.
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: 1. Navigate to about:addons#themes

2. Scroll to "Colorways" section.
3. Themes should be presented in a neat 3x6 grid.
4. When enabling a colorway theme, the "Enabled" section at the top displays that theme's card.

• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Low-risk because this change is CSS and well-understood JS changes that are covered by tests.
• String changes made/needed: N/A

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

Comment on attachment 9244287 [details]
Bug 1733632 - Update colorways section in about:addons to be a 3x6 grid. r?harry

Approved for 94.0b4.

https://hg.mozilla.org/releases/mozilla-beta/rev/0e67357977df

We verified the issue using latest Nightly 95.0a1 and Firefox 94.0b4 on macOS 10.15, Ubuntu 18.04 x64 and Windows 10 x64.