Fix MR widget padding

Align elements horizontally and add missing bottom padding

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

@@ -14,7 +14,7 @@ export default {
 </script>
 
 <template>
-  <p v-once class="mr-info-list mr-links source-branch-removal-status append-bottom-0">
+  <p v-once class="mr-info-list mr-links append-bottom-0">
     <span class="status-text" v-html="removesBranchText"> </span>
     <i v-tooltip :title="tooltipTitle" :aria-label="tooltipTitle" class="fa fa-question-circle">
     </i>

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -333,8 +333,11 @@ export default {
       <div class="mr-widget-section">
         <component :is="componentName" :mr="mr" :service="service" />
 
+        <div class="mr-widget-info">
           <section v-if="shouldRenderCollaborationStatus" class="mr-info-list mr-links">
+            <p>
               {{ s__('mrWidget|Allows commits from members who can merge to the target branch') }}
+            </p>
           </section>
 
           <mr-widget-related-links
@@ -369,6 +372,7 @@ export default {
 
           <source-branch-removal-status v-if="shouldRenderSourceBranchRemovalStatus" />
         </div>
+      </div>
       <div v-if="shouldRenderMergeHelp" class="mr-widget-footer"><mr-widget-merge-help /></div>
     </div>
     <mr-widget-pipeline-container

app/assets/stylesheets/pages/merge_requests.scss

@@ -87,6 +87,11 @@
   padding: $gl-padding;
 }
 
+.mr-widget-info {
+  padding-left: $gl-padding-50 - $gl-padding-32;
+  padding-right: $gl-padding;
+}
+
 .mr-state-widget {
   color: $gl-text-color;
 
@@ -560,6 +565,10 @@
 
 .mr-links {
   padding-left: $status-icon-size + $gl-btn-padding;
+
+  &:last-child {
+    padding-bottom: $gl-padding;
+  }
 }
 
 .mr-info-list {
@@ -1034,11 +1043,6 @@
   background: $black-transparent;
 }
 
-.source-branch-removal-status {
-  padding-left: 50px;
-  padding-bottom: $gl-padding;
-}
-
 .mr-compare {
   .diff-file .file-title-flex-parent {
     top: $header-height + 51px;

changelogs/unreleased/58632-fix-mr-widget-padding.yml

+---
+title: Fix padding in MR widget
+merge_request: 28472
+author:
+type: fixed