[Extensions Checkup] Modify checkup banner UI.

Reduces use of margins and calc in the checkup banner.
Checkup banner image and text overlap when the screen width is 930px.
Issue: https://screenshot.googleplex.com/0r8JXYYOOvY

1 column: https://screenshot.googleplex.com/qTuVDG6rcBb
2 column: https://screenshot.googleplex.com/QRm4c4XjF0u

Bug: 1019296
Change-Id: Iee4071726c78871f2ddf79ec619231473d71a2b7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1995922Reviewed-by: John Lee <johntlee@chromium.org>
Reviewed-by: Devlin <rdevlin.cronin@chromium.org>
Commit-Queue: Archana Simha <archanasimha@chromium.org>
Cr-Commit-Position: refs/heads/master@{#735647}

chrome/browser/resources/extensions/checkup.html

 <style include="iron-flex shared-style">
   :host {
     --checkup-card-margin: 24px;
-    /* Aligns the banner description under the title in the 2 column view.*/
-    --description-top-margin: calc(var(--extensions-card-height) * -1 +
-      var(--checkup-card-margin));
+    --banner-img-height: 115px;
     --banner-img-width: 298px;
   }
 
@@ -11,53 +9,42 @@
     @apply --cr-card-elevation;
     background-color: var(--cr-card-background-color);
     border-radius: var(--cr-card-border-radius);
-    display: flex;
-    flex: 1;
-    flex-wrap: wrap;
-    /* The checkup card should be at least as tall as an extension item card.*/
-    min-height: var(--extensions-card-height);
+    overflow: hidden;
+    padding: var(--checkup-card-margin);
     transition: height var(--drawer-transition);
   }
 
-  #banner-title {
-    color: var(--cr-primary-text-color);
-    font-size: 123%;
-    margin: var(--checkup-card-margin) var(--checkup-card-margin) 0;
-    min-height: var(--cr-section-min-height);
-    text-overflow: ellipsis;
-    width: calc(var(--extensions-card-width) + var(--grid-gutter));
+  #banner-img {
+    background: url(checkup_image.svg);
+    background-repeat: no-repeat;
+    display: inline-block;
+    float: right;
+    /* Height and width match the dimensions of the banner image. */
+    height: var(--banner-img-height);
+    width: var(--banner-img-width);
   }
 
   #banner-description {
     @apply --cr-secondary-text;
     flex-basis: var(--extensions-card-width);
-    margin: var(--description-top-margin) var(--checkup-card-margin)
-      var(--checkup-card-margin);
     text-overflow: ellipsis;
   }
 
-  #banner-img {
-    background: url(checkup_image.svg);
-    background-repeat: no-repeat;
-    /* Height and width match the dimensions of the banner image. */
-    height: 115px;
-    /* We add 10px to the top margin to place the image slightly below the
-       banner title in the 2 column view.*/
-    margin: calc(10px + var(--checkup-card-margin)) var(--checkup-card-margin)
-      var(--checkup-card-margin);
-    width: var(--banner-img-width);
+  #banner-title {
+    color: var(--cr-primary-text-color);
+    font-size: 123%;
   }
 
-  @media (max-width: 930px) {
-    /* Styling for 1 column view */
-    #banner-description {
-      margin: 12px var(--checkup-card-margin) 12px;
-    }
-
+  /* 932px is the last screen width in which we can fit a banner that spans two
+     columns and can be calculated by adding 2 card widths of
+     var(--extensions-card-width) and the column gap var(--grid-gutter) and
+     maintain padding of 60px on either side of the content on this page
+     (see content-wrapper in item-list.html).*/
+  @media (max-width: 931px) {
     #banner-img {
-      /* Centers the image in the 1 column view.*/
-      margin: 0 calc((var(--extensions-card-width) - var(--banner-img-width))
-        / 2) 0;
+      display: block;
+      float: initial;
+      margin: 12px auto 0;
     }
   }