Merge branch 'more-mr-widget-fixes' into 'master'

More mr widget fixes

Closes #6857

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

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue

@@ -32,7 +32,7 @@
   };
 </script>
 <template>
-  <div class="space-children d-flex append-right-10">
+  <div class="space-children d-flex append-right-10 widget-status-icon">
     <div
       v-if="isLoading"
       class="mr-widget-icon"

app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue

@@ -237,7 +237,7 @@ export default {
     <status-icon :status="iconClass" />
     <div class="media-body">
       <div class="mr-widget-body-controls media space-children">
-        <span class="btn-group append-bottom-5">
+        <span class="btn-group">
           <button
             :disabled="isMergeButtonDisabled"
             :class="mergeButtonClass"

app/assets/stylesheets/pages/merge_requests.scss

@@ -214,6 +214,10 @@
     }
   }
 
+  .widget-status-icon {
+    align-self: flex-start;
+  }
+
   .mr-widget-body {
     line-height: 28px;
 

ee/app/assets/javascripts/vue_shared/security_reports/grouped_security_reports_app.vue

@@ -210,7 +210,7 @@ export default {
     :loading-text="groupedSummaryText"
     :error-text="groupedSummaryText"
     :has-issues="true"
-    class="mr-widget-border-top"
+    class="mr-widget-border-top grouped-security-reports"
   >
     <div
       slot="body"

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

@@ -36,6 +36,7 @@
   .code-text {
     @include media-breakpoint-up(lg) {
       align-self: center;
+      flex: 1;
     }
   }
 }
@@ -101,6 +102,14 @@
       border-radius: $border-radius-default $border-radius-default 0 0;
     }
   }
+
+  .grouped-security-reports {
+    padding: 0;
+
+    > .media {
+      padding: $gl-padding;
+    }
+  }
 }
 
 .mr-widget-section {

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

@@ -39,7 +39,6 @@
 }
 
 .mr-widget-grouped-section {
-  margin-top: $gl-padding;
 
   .report-block-container {
     max-height: 170px;