Merge branch '32657-fix-mr-widget-styles' into 'master'

MR widget styling fixes

Closes #32657

See merge request !11591

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js

@@ -210,7 +210,7 @@ export default {
           v-if="shouldShowMergeOptionsDropdown"
           :disabled="isMergeButtonDisabled"
           type="button"
-          class="btn btn-info dropdown-toggle"
+          class="btn btn-small btn-info dropdown-toggle"
           data-toggle="dropdown">
           <i
             class="fa fa-caret-down"

app/assets/stylesheets/pages/merge_requests.scss

@@ -209,8 +209,7 @@
     }
   }
 
-  .mr-widget-heading,
-  .mr-widget-body {
+  .mr-widget-heading {
     .btn-default.btn-xs {
       margin-left: 5px;
     }
@@ -223,13 +222,17 @@
 
     .btn-group .btn {
       padding: 5px 10px;
+
+      &.dropdown-toggle {
+        padding: 5px 7px;
+      }
     }
   }
 
   .mr-widget-body {
     h4 {
-      font-weight: 600;
-      font-size: 16px;
+      font-weight: bold;
+      font-size: 15px;
       margin: 5px 0;
       color: $gl-text-color;
 
@@ -256,7 +259,6 @@
     }
 
     .bold {
-      margin-left: 5px;
       font-weight: bold;
       font-size: 15px;
       color: $gl-gray-light;
@@ -405,6 +407,12 @@
   }
 }
 
+.mr-state-widget .mr-widget-body {
+  .approve-btn {
+    margin-right: 5px;
+  }
+}
+
 .mr_source_commit,
 .mr_target_commit {
   margin-bottom: 0;
@@ -547,7 +555,7 @@
 
   p {
     float: left;
-    padding-left: 20px;
+    padding-left: 21px;
 
     &::before {
       top: 13px;