Backport mr widget changes from EE

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

@@ -233,7 +233,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;