Merge branch '6857-missed-mr-widget-states' into 'master'

Resolve "MR Widget redesign was not done for license management / security products."

Closes #6857

See merge request gitlab-org/gitlab-ee!6440

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/mr_widget_approvals.vue

@@ -59,9 +59,9 @@ export default {
 };
 </script>
 <template>
-  <div
+  <section
     v-if="mr.approvalsRequired"
-    class="mr-widget-approvals-container mr-widget-section media"
+    class="mr-widget-approvals-container mr-widget-section media media-section"
   >
     <status-icon
       :class="approvalsOptional ? 'zero-approvals' : ''"
@@ -98,5 +98,5 @@ export default {
         :approvals-left="mr.approvals.approvals_left"
       />
     </div>
-  </div>
+  </section>
 </template>

ee/app/assets/javascripts/vue_shared/security_reports/components/report_section.vue

@@ -138,7 +138,7 @@ export default {
 };
 </script>
 <template>
-  <section>
+  <section class="media-section">
     <div
       class="media"
     >
@@ -146,7 +146,7 @@ export default {
         :status="statusIconName"
       />
       <div
-        class="media-body space-children"
+        class="media-body space-children d-flex"
       >
         <span
           class="js-code-text code-text"

ee/app/assets/stylesheets/pages/merge_requests.scss

@@ -16,18 +16,35 @@
 }
 
 .mr-widget-approvals-container {
-  border: 1px solid $border-color;
-  margin-bottom: -1px;
-  border-radius: $border-radius-default $border-radius-default 0 0;
+  align-items: center;
 
   .zero-approvals .ci-status-icon-success svg {
     fill: $gray-darkest;
   }
 }
 
+.media-section {
+  @include media-breakpoint-down(md) {
+    align-items: flex-start;
+
+    .media-body {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
+  .code-text {
+    @include media-breakpoint-up(lg) {
+      align-self: center;
+    }
+  }
+}
+
 .approvals-body {
-  display: flex;
-  align-items: center;
+  @include media-breakpoint-up(md) {
+    display: flex;
+    align-items: center;
+  }
 
   .approve-btn {
    vertical-align: baseline;
@@ -73,3 +90,25 @@
     position: relative;
   }
 }
+
+.mr-state-widget {
+  .media-section {
+    padding: $gl-padding;
+    border: 1px solid $border-color;
+    margin-bottom: -1px;
+
+    &:first-of-type {
+      border-radius: $border-radius-default $border-radius-default 0 0;
+    }
+  }
+}
+
+.mr-widget-section {
+  .media {
+    align-items: center;
+  }
+
+  .code-text {
+    flex: 1;
+  }
+}

ee/app/assets/stylesheets/pages/security_reports.scss

@@ -34,10 +34,13 @@
 
   .code-text {
     width: 100%;
+    flex: 1;
   }
 }
 
 .mr-widget-grouped-section {
+  margin-top: $gl-padding;
+
   .report-block-container {
     max-height: 170px;
     overflow: auto;