Merge branch '280538-fix-approvals-widget-alignment' into 'master'

Fix approvals widget alignment issues

See merge request gitlab-org/gitlab!53213

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

@@ -67,10 +67,11 @@ export default {
 
 <template>
   <div>
-    <div class="mr-widget-extension d-flex align-items-center pl-3">
+    <div class="mr-widget-extension d-flex align-items-center pl-3 gl-py-3">
       <!-- TODO: simplify button classes once https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1029 is completed -->
       <gl-button
         class="gl-mr-3"
+        size="small"
         :class="{ 'gl-shadow-none!': shouldShowLoadingSpinner }"
         :aria-label="ariaLabel"
         :loading="shouldShowLoadingSpinner"

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_list.vue

@@ -99,7 +99,7 @@ export default {
         class="d-none"
       >
         <th class="w-0"></th>
-        <th class="w-25">{{ s__('MRApprovals|Approvers') }}</th>
+        <th class="w-25 gl-pl-0!">{{ s__('MRApprovals|Approvers') }}</th>
         <th class="w-50"></th>
         <th>{{ s__('MRApprovals|Approvals') }}</th>
         <th v-if="glFeatures.approvalsCommentedBy">{{ s__('MRApprovals|Commented by') }}</th>
@@ -114,8 +114,8 @@ export default {
         </td>
       </tr>
       <tr v-for="rule in rules" :key="rule.id">
-        <td class="w-0"><approved-icon :is-approved="rule.approved" /></td>
-        <td :colspan="rule.rule_type === $options.ruleTypeAnyApprover ? 2 : 1">
+        <td class="w-0 gl-pr-4!"><approved-icon class="gl-pl-2" :is-approved="rule.approved" /></td>
+        <td :colspan="rule.rule_type === $options.ruleTypeAnyApprover ? 2 : 1" class="gl-pl-0!">
           <div
             :class="glFeatures.approvalsCommentedBy ? 'd-md-block' : 'd-sm-block'"
             class="d-none js-name"

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approved_icon.vue

@@ -15,6 +15,8 @@ export default {
 </script>
 
 <template>
-  <gl-icon v-if="isApproved" name="mobile-issue-close" class="text-success" :size="16" />
-  <div v-else class="square s16"></div>
+  <div>
+    <gl-icon v-if="isApproved" name="mobile-issue-close" class="text-success" :size="16" />
+    <div v-else class="square s16"></div>
+  </div>
 </template>

ee/changelogs/unreleased/280538-fix-approvals-widget-alignment.yml

+---
+title: Fix approvals widget alignment issues
+merge_request: 53213
+author:
+type: fixed