1927964 - Improve responsive design of integrated RC

Status: RESOLVED FIXED

(Firefox Graveyard :: Shopping, defect, P2)

Description

[kpatenio]

With WIP changes like https://phabricator.services.mozilla.com/D226075, the RC UI doesn't look quite right with different sidebar sizes. The feedback I received so far includes:

Recommendations panel

• letter grade should be below product image

Settings panel

• font-size for the toggle descriptions (not labels) are the same size as the labels, when they should be smaller
• toggles are "sticking out" with the min sidebar width size. We might have to adjust how we "group" the elements for the panel

Empty states:

• with larger / max width, illustration, description, and CTA button should be centered. Illustration should maintain its original size
• with the min width, illustration should be slightly smaller

Bonus:

• loading state boxes should be rounded (no sharp corners)
• loading state boxes are slightly bigger than they should be (no scroll must be needed to see all of them)

We also have a new Figma spec for the layout with different sidebar widths: https://www.figma.com/design/GnCtw7DmPtlSEIfjatHtSI/Review-Checker-in-sidebar?node-id=12309-117085&node-type=frame&m=dev

Comment 1

[kpatenio]

Attachment: Bug 1927964 - Improve responsive design of integrated RC. r=#shopping-reviewers!

Comment 2

[kpatenio]

Attachment: WIP: Bug 1927964 - Improve responsive design of integrated RC. r=#shopping-reviewers!

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b2dba433ee1e
Improve responsive design of integrated RC. r=shopping-reviewers,rking

Comment 4

[Serban Stanca [:SerbanS]]

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