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,41 +333,45 @@ export default {
       <div class="mr-widget-section">
         <component :is="componentName" :mr="mr" :service="service" />
-        <section v-if="shouldRenderCollaborationStatus" class="mr-info-list mr-links">
-          {{ s__('mrWidget|Allows commits from members who can merge to the target branch') }}
-        </section>
-        <mr-widget-related-links
-          v-if="shouldRenderRelatedLinks"
-          :state="mr.state"
-          :related-links="mr.relatedLinks"
-        />
-        <mr-widget-alert-message
-          v-if="showMergePipelineForkWarning"
-          type="warning"
-          :help-path="mr.mergeRequestPipelinesHelpPath"
-        >
-          {{
-            s__(
-              'mrWidget|Fork merge requests do not create merge request pipelines which validate a post merge result',
-            )
-          }}
-        </mr-widget-alert-message>
-        <mr-widget-alert-message
-          v-if="showTargetBranchAdvancedError"
-          type="danger"
-          :help-path="mr.mergeRequestPipelinesHelpPath"
-        >
-          {{
-            s__(
-              'mrWidget|The target branch has advanced, which invalidates the merge request pipeline. Please update the source branch and retry merging',
-            )
-          }}
-        </mr-widget-alert-message>
-        <source-branch-removal-status v-if="shouldRenderSourceBranchRemovalStatus" />
+        <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
+            v-if="shouldRenderRelatedLinks"
+            :state="mr.state"
+            :related-links="mr.relatedLinks"
+          />
+          <mr-widget-alert-message
+            v-if="showMergePipelineForkWarning"
+            type="warning"
+            :help-path="mr.mergeRequestPipelinesHelpPath"
+          >
+            {{
+              s__(
+                'mrWidget|Fork merge requests do not create merge request pipelines which validate a post merge result',
+              )
+            }}
+          </mr-widget-alert-message>
+          <mr-widget-alert-message
+            v-if="showTargetBranchAdvancedError"
+            type="danger"
+            :help-path="mr.mergeRequestPipelinesHelpPath"
+          >
+            {{
+              s__(
+                'mrWidget|The target branch has advanced, which invalidates the merge request pipeline. Please update the source branch and retry merging',
+              )
+            }}
+          </mr-widget-alert-message>
+          <source-branch-removal-status v-if="shouldRenderSourceBranchRemovalStatus" />
+        </div>
       </div>
       <div v-if="shouldRenderMergeHelp" class="mr-widget-footer"><mr-widget-merge-help /></div>
     </div>

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