Removes the gap in approvers in the MR widget

app/assets/stylesheets/pages/merge_requests.scss

@@ -724,7 +724,14 @@
   .approvers-list {
     display: flex;
     align-items: center;
-    margin-right: 5px;
+  }
+
+  .approvers-list {
+    .link-to-member-avatar:not(:first-child) {
+      img {
+        margin-left: 0;
+      }
+    }
   }
 
   .unapprove-btn {

changelogs/unreleased-ee/37197-approved-gap.yml

+---
+title: Fix the gap in approvals in merge request widget
+merge_request:
+author:
+type: fixed

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.js

@@ -59,43 +59,48 @@ export default {
         })
         .catch(() => {
           this.unapproving = false;
-          new Flash('An error occured while removing your approval.'); // eslint-disable-line
+          Flash('An error occured while removing your approval.');
         });
     },
   },
   template: `
-    <div v-if="approvedBy.length" class="approved-by-users approvals-footer clearfix mr-info-list">
-      <div class="approvers-prefix space-children">
+    <div
+      v-if="approvedBy.length"
+      class="approved-by-users approvals-footer clearfix mr-info-list">
+      <div class="approvers-prefix">
         <p>Approved by</p>
         <div class="approvers-list">
-          <span v-for="approver in approvedBy">
           <link-to-member-avatar
-              :avatarSize="20"
+            v-for="(approver, index) in approvedBy"
+            :key="index"
+            :avatar-size="20"
             :avatar-url="approver.user.avatar_url"
             extra-link-class="approver-avatar"
             :display-name="approver.user.name"
             :profile-url="approver.user.web_url"
-              :show-tooltip="true" />
-          </span>
-          <span class="potential-approvers-list" v-for="n in approvalsLeft">
+            :show-tooltip="true"
+            />
           <link-to-member-avatar
-              :avatarSize="20"
+            v-for="n in approvalsLeft"
+            :key="n"
+            :avatar-size="20"
             :clickable="false"
-              :show-tooltip="false" />
-          </span>
+            :show-tooltip="false"
+            />
         </div>
-        <span class="unapprove-btn-wrap" v-if="showUnapproveButton">
         <button
+          v-if="showUnapproveButton"
+          type="button"
           :disabled="unapproving"
           @click="unapproveMergeRequest"
-            class="btn btn-xs">
+          class="btn btn-small unapprove-btn-wrap">
           <i
             v-if="unapproving"
             class="fa fa-spinner fa-spin"
-              aria-hidden="true" />
+            aria-hidden="true">
+          </i>
           Remove your approval
         </button>
-        </span>
       </div>
     </div>
   `,