Merge branch '64831-add-padding-to-merged-by-widget' into 'master'

Resolve "Add padding to "merged by" widget"

Closes #64831

See merge request gitlab-org/gitlab-ce!30972

(cherry picked from commit 029381b1)

98657dbb Add space between icon and `merged by` section
4565e081 Shrink padding for wr-widget-info
4ebd05fe Make status icon in merge widget borderless
0818fdb7 Revert "Make status icon in merge widget borderless"
fc012bcb Remove .widget-status-icon class with utilities

app/assets/javascripts/reports/components/report_section.vue

@@ -166,7 +166,7 @@ export default {
   <section class="media-section">
     <div class="media">
       <status-icon :status="statusIconName" :size="24" />
-      <div class="media-body d-flex flex-align-self-center prepend-left-default">
+      <div class="media-body d-flex flex-align-self-center">
         <span class="js-code-text code-text">
           {{ headerText }}
           <slot :name="slotName"></slot>

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

@@ -32,10 +32,13 @@ export default {
 };
 </script>
 <template>
-  <div class="d-flex widget-status-icon">
-    <div v-if="isLoading" class="mr-widget-icon"><gl-loading-icon size="sm" /></div>
-
-    <ci-icon v-else :status="statusObj" :size="24" />
+  <div class="d-flex align-self-start">
+    <div class="square s24 h-auto d-flex-center append-right-default">
+      <div v-if="isLoading" class="mr-widget-icon">
+        <gl-loading-icon size="sm" />
+      </div>
+      <ci-icon v-else :status="statusObj" :size="24" />
+    </div>
     <button
       v-if="showDisabledButton"

app/assets/stylesheets/pages/merge_requests.scss

@@ -88,7 +88,7 @@
 }
 .mr-widget-info {
-  padding-left: $gl-padding-50 - $gl-padding-32;
+  padding-left: $gl-padding;
   padding-right: $gl-padding;
 }
@@ -262,23 +262,11 @@
     }
   }
-  .widget-status-icon {
-    align-self: flex-start;
-
-    button {
-      margin-left: $gl-padding;
-    }
-  }
-
   .mr-widget-body {
     line-height: 28px;
     @include clearfix;
-    button {
-      margin-left: $gl-padding;
-    }
-
     .approve-btn {
       margin-right: 5px;
     }
@@ -527,7 +515,7 @@
 }
 .mr-links {
-  padding-left: $status-icon-size + $gl-btn-padding;
+  padding-left: $gl-padding-8 + $status-icon-size + $gl-btn-padding;
   &:last-child {
     padding-bottom: $gl-padding;

changelogs/unreleased/64831-add-padding-to-merged-by-widget.yml

+---
+title: Add space to "merged by" widget
+merge_request: 30972
+author:
+type: fixed