Merge branch 'ph/280537/widgetMergeSectionAlignment' into 'master'

Fixes alignment issues in merge request widget

See merge request gitlab-org/gitlab!51101

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

@@ -36,7 +36,7 @@ export default {
 </script>
 
 <template>
-  <div class="m-3 ml-7" :class="messageClass">
+  <div class="gl-m-3 gl-ml-7" :class="messageClass">
     <slot></slot>
     <gl-link v-if="helpPath" :href="helpPath" target="_blank">
       <gl-icon :size="16" name="question-o" class="align-middle" />

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

@@ -30,7 +30,7 @@ export default {
 };
 </script>
 <template>
-  <section class="mr-widget-help font-italic">
+  <section class="gl-py-3 gl-pr-3 gl-pl-5 gl-ml-7 mr-widget-help gl-font-style-italic">
     <template v-if="missingBranch">
       {{ missingBranchInfo }}
     </template>

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

@@ -30,7 +30,7 @@ export default {
 };
 </script>
 <template>
-  <section class="mr-info-list mr-links">
+  <section class="mr-info-list gl-ml-7 gl-pb-5">
     <p v-if="relatedLinks.closing">{{ closesText }} <span v-html="relatedLinks.closing"></span></p>
     <p v-if="relatedLinks.mentioned">
       {{ s__('mrWidget|Mentions') }} <span v-html="relatedLinks.mentioned"></span>

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

@@ -18,7 +18,7 @@ export default {
 </script>
 
 <template>
-  <p v-once class="mr-info-list mr-links gl-mb-0">
+  <p v-once class="mr-info-list gl-ml-7 gl-pb-5 gl-mb-0">
     <span class="status-text">
       <gl-sprintf :message="$options.i18n.removesBranchText">
         <template #strong="{ content }">

app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue

@@ -83,6 +83,7 @@ export default {
         :aria-label="ariaLabel"
         category="tertiary"
         class="commit-edit-toggle gl-mr-3"
+        size="small"
         :icon="collapseIcon"
         @click.stop="toggle()"
       />

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue

@@ -159,13 +159,13 @@ export default {
       <div class="rebase-state-find-class-convention media media-body space-children">
         <span
           v-if="rebaseInProgress || isMakingRequest"
-          class="gl-font-weight-bold"
+          class="gl-font-weight-bold gl-ml-0!"
           data-testid="rebase-message"
           >{{ __('Rebase in progress') }}</span
         >
         <span
           v-if="!rebaseInProgress && !canPushToSourceBranch"
-          class="gl-font-weight-bold"
+          class="gl-font-weight-bold gl-ml-0!"
           data-testid="rebase-message"
           v-html="fastForwardMergeText"
         ></span>
@@ -181,12 +181,17 @@ export default {
           >
             {{ __('Rebase') }}
           </gl-button>
-          <span v-if="!rebasingError" class="gl-font-weight-bold" data-testid="rebase-message">{{
-            __(
-              'Fast-forward merge is not possible. Rebase the source branch onto the target branch.',
-            )
-          }}</span>
-          <span v-else class="gl-font-weight-bold danger" data-testid="rebase-message">{{
+          <span
+            v-if="!rebasingError"
+            class="gl-font-weight-bold gl-ml-0!"
+            data-testid="rebase-message"
+            >{{
+              __(
+                'Fast-forward merge is not possible. Rebase the source branch onto the target branch.',
+              )
+            }}</span
+          >
+          <span v-else class="gl-font-weight-bold danger gl-ml-0!" data-testid="rebase-message">{{
             rebasingError
           }}</span>
         </div>

app/assets/stylesheets/pages/merge_requests.scss

@@ -124,7 +124,7 @@ $mr-widget-min-height: 69px;
       padding: $gl-padding;
 
       @include media-breakpoint-up(md) {
-        padding-left: $gl-padding-8 * 7;
+        margin-left: $gl-spacing-scale-7;
       }
     }
   }
@@ -396,10 +396,6 @@ $mr-widget-min-height: 69px;
     }
   }
 
-  .mr-widget-help {
-    padding: 10px 16px 10px ($gl-padding-8 * 7);
-  }
-
   .ci-coverage {
     float: right;
   }

ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -392,7 +392,7 @@ export default {
       <div class="mr-widget-section">
         <component :is="componentName" :mr="mr" :service="service" />
         <div class="mr-widget-info">
-          <section v-if="mr.allowCollaboration" class="mr-info-list mr-links">
+          <section v-if="mr.allowCollaboration" class="mr-info-list gl-ml-7">
             <p>
               {{ s__('mrWidget|Allows commits from members who can merge to the target branch') }}
             </p>