Combine overall ratings with about card at extraExtraLarge breakpoint

Author: diox

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: 172px;
   }
+}
 
+.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;

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={172}
       >
         {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} />

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,20 @@
   width: 100%;
 }
 
+.Addon-description-rating-card > .Card-contents {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.Addon-description-rating-card .Addon-overall-rating {
+  margin-bottom: 0;
+
+  .Card-contents {
+    border-radius: 0;
+  }
+}
+
 // Details section with lots of grid stuff, on larger displays.
 @include respond-to(large) {
   .Addon-screenshots {
@@ -143,6 +153,24 @@
   .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;
+      width: 50%;
+
+      .Card-contents,
+      .Card-header,
+      .Card-footer {
+        border-radius: 0;
+      }
+    }
+  }
 }
 
 .Addon-WrongPlatformWarning {