Style MR widge report sections

app/assets/stylesheets/pages/merge_requests.scss

@@ -40,6 +40,14 @@
 .mr-widget-section,
 .mr-widget-footer {
   padding: $gl-padding;
+
+  .media {
+    align-items: center;
+  }
+
+  .code-text {
+    flex: 1;
+  }
 }
 
 .mr-state-widget {
@@ -116,10 +124,8 @@
 
       .modify-merge-commit-link {
         padding: 0;
-
         background-color: transparent;
         border: 0;
-
         color: $gl-text-color;
 
         &:hover,

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 bordered-widget-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="mr-widget-section bordered-widget-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,42 @@
 }
 
 .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;
   }
 }
 
+.bordered-widget-section {
+  border: 1px solid $border-color;
+  margin-bottom: -1px;
+
+  &:first-of-type {
+    border-radius: $border-radius-default $border-radius-default 0 0;
+  }
+
+  @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;

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;