Merge branch...

Merge branch '323647-mismatching-and-misaligned-checkboxes-in-the-merge-request-widget' into 'master'

Resolve "Mismatching and misaligned checkboxes in the merge request widget"

See merge request gitlab-org/gitlab!55905

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

@@ -5,6 +5,7 @@ import {
   GlButtonGroup,
   GlDropdown,
   GlDropdownItem,
+  GlFormCheckbox,
   GlSprintf,
   GlLink,
   GlTooltipDirective,
@@ -81,6 +82,7 @@ export default {
     GlButtonGroup,
     GlDropdown,
     GlDropdownItem,
+    GlFormCheckbox,
     GlSkeletonLoader,
     MergeTrainHelperText: () =>
       import('ee_component/vue_merge_request_widget/components/merge_train_helper_text.vue'),
@@ -495,16 +497,15 @@ export default {
             </gl-button-group>
             <div class="media-body-wrap space-children">
               <template v-if="shouldShowMergeControls">
-                <label v-if="canRemoveSourceBranch">
-                  <input
-                    id="remove-source-branch-input"
-                    v-model="removeSourceBranch"
-                    :disabled="isRemoveSourceBranchButtonDisabled"
-                    class="js-remove-source-branch-checkbox"
-                    type="checkbox"
-                  />
+                <gl-form-checkbox
+                  v-if="canRemoveSourceBranch"
+                  id="remove-source-branch-input"
+                  v-model="removeSourceBranch"
+                  :disabled="isRemoveSourceBranchButtonDisabled"
+                  class="js-remove-source-branch-checkbox gl-min-h-7 gl-display-flex gl-align-items-center gl-mr-2"
+                >
                   {{ __('Delete source branch') }}
-                </label>
+                </gl-form-checkbox>
 
                 <!-- Placeholder for EE extension of this component -->
                 <squash-before-merge

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

@@ -44,7 +44,7 @@ export default {
       :checked="value"
       :disabled="isDisabled"
       name="squash"
-      class="qa-squash-checkbox js-squash-checkbox gl-mb-0 gl-mr-2"
+      class="qa-squash-checkbox js-squash-checkbox gl-min-h-7 gl-display-flex gl-align-items-center gl-mr-2"
       :title="tooltipTitle"
       @change="(checked) => $emit('input', checked)"
     >