From a57750255caecc16410b04a82267afb2228d4ff1 Mon Sep 17 00:00:00 2001
From: Mathieu Pillard <mpillard@mozilla.com>
Date: Fri, 1 Aug 2025 11:19:54 +0200
Subject: [PATCH 1/2] Combine overall ratings with about card at
 extraExtraLarge breakpoint, limit its width

---
 src/amo/components/RatingManager/index.js   |  3 +-
 src/amo/components/ShowMoreCard/styles.scss | 20 ++++++---
 src/amo/pages/Addon/index.js                |  9 ++--
 src/amo/pages/Addon/styles.scss             | 47 +++++++++++++++++++--
 4 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/src/amo/components/RatingManager/index.js b/src/amo/components/RatingManager/index.js
index 1e799552e7e..84581e85326 100644
--- a/src/amo/components/RatingManager/index.js
+++ b/src/amo/components/RatingManager/index.js
@@ -209,8 +209,7 @@ export class RatingManagerBase extends React.Component<InternalProps> {
           />
           {/* eslint-enable react/no-danger */}
           <div className="RatingManager-ratingControl">
-            {!this.isSignedIn() ? this.renderLogInToRate() : null}
-            {i18n.gettext('Click to rate:')}
+            {this.isSignedIn() ? i18n.gettext('Click to rate:') : this.renderLogInToRate()}
             {userReview && onDeleteScreen ? (
               <AddonReviewManagerRating
                 className="RatingManager-AddonReviewManagerRating"
diff --git a/src/amo/components/ShowMoreCard/styles.scss b/src/amo/components/ShowMoreCard/styles.scss
index 40d38046ef0..2e73f52ca59 100644
--- a/src/amo/components/ShowMoreCard/styles.scss
+++ b/src/amo/components/ShowMoreCard/styles.scss
@@ -27,17 +27,27 @@
   }
 }
 
-.AddonDescription,
-.PermissionsCard {
-  .Card-contents {
-    border-radius: 0;
+.AddonDescription {
+  .ShowMoreCard-contents {
+    // Keep in sync with `maxHeight` passed to the `ShowMoreCard` component in
+    // `Addon/index.js`
+    max-height: 230px;
   }
+}
 
+.PermissionsCard {
   .ShowMoreCard-contents {
     // Keep in sync with `maxHeight` passed to the `ShowMoreCard` component in
-    // `Addon/index.js` and `PermissionCard/index.js`.
+    // `PermissionCard/index.js`.
     max-height: 300px;
   }
+}
+
+.AddonDescription,
+.PermissionsCard {
+  .Card-contents {
+    border-radius: 0;
+  }
 
   &.ShowMoreCard--expanded .ShowMoreCard-contents {
     max-height: none;
diff --git a/src/amo/pages/Addon/index.js b/src/amo/pages/Addon/index.js
index 01fd1815bca..2ee877d3375 100644
--- a/src/amo/pages/Addon/index.js
+++ b/src/amo/pages/Addon/index.js
@@ -322,7 +322,7 @@ export class AddonBase extends React.Component {
         className={showMoreCardName}
         header={title}
         id={showMoreCardName}
-        maxHeight={300}
+        maxHeight={230}
       >
         {descriptionProps && Object.keys(descriptionProps).length ? (
           <div className="AddonDescription-contents" {...descriptionProps} />
@@ -547,9 +547,10 @@ export class AddonBase extends React.Component {
                 </Card>
               ) : null}
 
-              {this.renderAboutThisCard()}
-
-              {this.renderRatingsCard()}
+              <Card className="Addon-description-rating-card">
+                {this.renderAboutThisCard()}
+                {this.renderRatingsCard()}
+              </Card>
             </div>
 
             <PermissionsCard version={currentVersion} />
diff --git a/src/amo/pages/Addon/styles.scss b/src/amo/pages/Addon/styles.scss
index 08625e417a7..57ceeadd8ee 100644
--- a/src/amo/pages/Addon/styles.scss
+++ b/src/amo/pages/Addon/styles.scss
@@ -6,10 +6,6 @@
 
 .Addon .Card {
   margin-bottom: $padding-page;
-
-  @include respond-to(large) {
-    margin-bottom: $padding-page-l;
-  }
 }
 
 .Addon-icon-wrapper {
@@ -117,6 +113,32 @@
   width: 100%;
 }
 
+.Addon-description-rating-card > .Card-contents {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.Addon-description-rating-card {
+  .AddonDescription {
+    max-width: 760px;
+  }
+
+  .Addon-overall-rating {
+    margin-bottom: 0;
+
+    @include respond-to(medium) {
+      min-width: 380px;
+      max-width: 520px;
+      flex-grow: 1;
+    }
+
+    .Card-contents {
+      border-radius: 0;
+    }
+  }
+}
+
 // Details section with lots of grid stuff, on larger displays.
 @include respond-to(large) {
   .Addon-screenshots {
@@ -143,6 +165,23 @@
   .AddonMoreInfo dl {
     column-count: 3;
   }
+
+  .Addon-description-rating-card > .Card-contents {
+    flex-direction: row;
+  }
+
+  .Addon-description-rating-card {
+    .AddonDescription,
+    .Addon-overall-rating {
+      margin-bottom: 0;
+
+      .Card-contents,
+      .Card-header,
+      .Card-footer {
+        border-radius: 0;
+      }
+    }
+  }
 }
 
 .Addon-WrongPlatformWarning {

From 742fbb56b93ab750d470fb8753ac8c0dcc4099ce Mon Sep 17 00:00:00 2001
From: Mathieu Pillard <mpillard@mozilla.com>
Date: Fri, 1 Aug 2025 15:15:12 +0200
Subject: [PATCH 2/2] Prettier

---
 src/amo/components/RatingManager/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/amo/components/RatingManager/index.js b/src/amo/components/RatingManager/index.js
index 84581e85326..8b8b071a091 100644
--- a/src/amo/components/RatingManager/index.js
+++ b/src/amo/components/RatingManager/index.js
@@ -209,7 +209,9 @@ export class RatingManagerBase extends React.Component<InternalProps> {
           />
           {/* eslint-enable react/no-danger */}
           <div className="RatingManager-ratingControl">
-            {this.isSignedIn() ? i18n.gettext('Click to rate:') : this.renderLogInToRate()}
+            {this.isSignedIn()
+              ? i18n.gettext('Click to rate:')
+              : this.renderLogInToRate()}
             {userReview && onDeleteScreen ? (
               <AddonReviewManagerRating
                 className="RatingManager-AddonReviewManagerRating"