Combine overall ratings with about card at extraExtraLarge breakpoint

[diox]

Fixes mozilla/addons#15733

Description of changes

• Stopped displaying "Click to rate" text if not logged in (it was overlapping with the "Log in to rate this extension" in some sizes, and obviously redundant)
• Reduced margin between cards overall in larger breakpoint to reduce wasted vertical space since the card layout is going away soon anyway
• Added some min/max widths where appropriate
• Moved overall ratings and description in a wrapper card, and let both be displayed side by side are higher resolutions
  • Overrode the rounded corners on both cards as a result, the rounded corners are coming from the wrapper now
• Tweaked description area height before triggering "Read more"

Context & notes

Because the final design doesn't have the card-style layout with rounded corners etc I had to improvise a bit, and ultimately chose to wrap the cards in another card. This makes the design kinda inconsistent, because the grey border around card headers & footers is normally provided by the grey background, but here the background of the inner cards is white from the wrapper card instead, so you don't see those borders. I feel like this is a good compromise before getting rid of that style in phase 2.

Screenshots

Before

Extra Extra Large

Large

"Small"

After

Extra Extra Large

Large

"Small"

Bonus Extra Extra Large with short description

Bonus Extra Extra Large logged in

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.28%. Comparing base (31152e1) to head (742fbb5).
⚠️ Report is 5 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #13708   +/-   ##
=======================================
  Coverage   98.28%   98.28%           
=======================================
  Files         265      265           
  Lines       10654    10655    +1     
  Branches     3265     3266    +1     
=======================================
+ Hits        10471    10472    +1     
  Misses        170      170           
  Partials       13       13           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[eviljeff]

Stopped displaying "Click to rate" text if not logged in (it was overlapping with the "Log in to rate this extension" in some sizes, and obviously redundant)

This was, iirc, to keep the stars in a consistent position when logged out (v.s. logged in)

[diox]

This was, iirc, to keep the stars in a consistent position when logged out (v.s. logged in)

Ah. It was doing more harm than good because in some breakpoints the text was overlapping, but we could revisit this in phase 2 if we care about this behavior.