Fix broken theme thumbnail (quick fix) (#13653)

* Fix broken theme thumbnail (quick fix)

* Fix theme preview layout on large-extra large

Author: KevinMind

src/amo/components/ThemeImage/styles.scss

@@ -13,7 +13,6 @@
 .ThemeImage-image {
   display: block;
   height: auto;
-  max-width: $theme-width-default;
   object-fit: cover;
   object-position: top left;
   width: 100%;

src/amo/pages/Addon/index.js

@@ -174,7 +174,11 @@ export class AddonBase extends React.Component {
     const { addon, i18n } = this.props;
 
     if (addon && ADDON_TYPE_STATIC_THEME === addon.type) {
-      return <ThemeImage addon={addon} roundedCorners />;
+      return (
+        <div className="Addon-theme-thumbnail">
+          <ThemeImage addon={addon} roundedCorners />
+        </div>
+      );
     }
 
     const label = addon
@@ -184,14 +188,12 @@ export class AddonBase extends React.Component {
       : null;
 
     return (
-      <div key="Addon-icon-header">
-        <div className="Addon-icon-wrapper">
-          <img
-            alt={label}
-            className="Addon-icon-image"
-            src={getAddonIconUrl(addon)}
-          />
-        </div>
+      <div className="Addon-icon-wrapper">
+        <img
+          alt={label}
+          className="Addon-icon-image"
+          src={getAddonIconUrl(addon)}
+        />
       </div>
     );
   }
@@ -484,22 +486,22 @@ export class AddonBase extends React.Component {
                 </Notice>
               ) : null}
 
+              {addon && <InstallWarning addon={addon} />}
+              {addon ? (
+                <WrongPlatformWarning
+                  addon={addon}
+                  className="Addon-WrongPlatformWarning"
+                />
+              ) : null}
+
               <header className="Addon-header">
                 {this.headerImage()}
 
                 <div className="Addon-info">
                   <AddonTitle addon={addon} />
                   {showSummary ? summary : null}
-
-                  <AddonBadges addon={addon} />
-                  {addon && <InstallWarning addon={addon} />}
-                  {addon ? (
-                    <WrongPlatformWarning
-                      addon={addon}
-                      className="Addon-WrongPlatformWarning"
-                    />
-                  ) : null}
                 </div>
+                <AddonBadges addon={addon} />
                 <div className="Addon-install">
                   <InstallButtonWrapper addon={addon} />
                 </div>

src/amo/pages/Addon/styles.scss

@@ -37,33 +37,66 @@
   }
 }
 
-.Addon-theme .AddonTitle {
-  margin: $padding-page-l 0;
-}
-
 .Addon-header {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 16px;
-  padding: 6px 0;
+  display: flex;
+  flex-direction: column;
+  row-gap: 14px;
+
+  @include respond-to(medium) {
+    display: grid;
+    grid-template:
+      'preview preview' auto
+      'icon icon' auto
+      'info info' auto
+      'badges badges' auto
+      '. button' auto / 1fr 1fr;
+  }
 
   @include respond-to(large) {
-    grid-template-columns: 0.5fr 3fr 1fr;
+    column-gap: 14px;
+    grid-template:
+      'preview preview preview preview preview' auto
+      'icon info info button button' auto
+      'badges badges badges badges badges' auto / min-content 1fr 1fr 1fr auto;
+  }
+
+  @include respond-to(extraLarge) {
+    grid-template:
+      'icon info button' auto
+      'preview preview preview' auto
+      'badges badges badges' auto / min-content 1fr auto;
+  }
+
+  @include respond-to(extraExtraLarge) {
+    grid-template:
+      'preview preview preview preview . button' auto
+      'icon info info info . button' auto
+      'badges badges badges badges badges badges' auto / min-content 1fr 1fr 1fr auto;
+  }
+
+  & .Addon-theme-thumbnail {
+    grid-area: preview;
+  }
+
+  & .Addon-icon-wrapper {
+    grid-area: icon;
   }
 
   & .Addon-info {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
+    grid-area: info;
+  }
+
+  & .AddonBadges {
+    grid-area: badges;
   }
 
   & .Addon-install {
-    @include respond-to(medium) {
-      margin-left: auto;
-      width: 50%;
-    }
+    grid-area: button;
     @include respond-to(large) {
-      width: 100%;
+      min-width: 180px;
+    }
+    @include respond-to(extraLarge) {
+      min-width: 200px;
     }
   }
 }
@@ -128,7 +161,6 @@
 }
 
 .Addon-WrongPlatformWarning {
-  margin: 12px 0 0;
   padding-left: 0;
   padding-right: 0;
 }