Merge branch 'zillemarco-improve-mr-header-alignment' into 'master'

Fixed alignment of MR title texts

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/125134



Merged-by: Jose Ivan Vargas <jvargas@gitlab.com>
Approved-by: Thomas Hutterer <thutterer@gitlab.com>
Approved-by: Jose Ivan Vargas <jvargas@gitlab.com>
Approved-by: Alex Fracazo <afracazo@gitlab.com>
Reviewed-by: Marco Zille <marco.zille@gmail.com>
Co-authored-by: Marco Zille <marco.zille@gmail.com>

app/assets/javascripts/issuable/components/status_box.vue

@@ -135,7 +135,7 @@ export default {
 
 <template>
   <gl-badge
-    class="issuable-status-badge gl-mr-3"
+    class="issuable-status-badge gl-mr-3 gl-align-self-center"
     :class="badgeClass"
     :variant="badgeVariant"
     :aria-label="badgeText"

app/assets/javascripts/merge_requests/components/sticky_header.vue

@@ -113,14 +113,14 @@ export default {
         class="issue-sticky-header-text gl-display-flex gl-flex-direction-column gl-align-items-center gl-mx-auto gl-px-5 gl-w-full"
         :class="{ 'gl-max-w-container-xl': !isFluidLayout }"
       >
-        <div class="gl-w-full gl-display-flex gl-align-items-center">
+        <div class="gl-w-full gl-display-flex gl-align-items-baseline">
           <status-box :initial-state="getNoteableData.state" issuable-type="merge_request" />
           <a
             v-safe-html:[$options.safeHtmlConfig]="titleHtml"
             href="#top"
             class="gl-display-none gl-lg-display-block gl-font-weight-bold gl-overflow-hidden gl-white-space-nowrap gl-text-overflow-ellipsis gl-my-0 gl-mr-4 gl-text-black-normal"
           ></a>
-          <div class="gl-display-flex gl-align-items-center">
+          <div class="gl-display-flex gl-align-items-baseline">
             <gl-sprintf :message="__('%{source} %{copyButton} into %{target}')">
               <template #copyButton>
                 <clipboard-button
@@ -129,7 +129,7 @@ export default {
                   size="small"
                   category="tertiary"
                   tooltip-placement="bottom"
-                  class="gl-m-0! gl-mx-1! js-source-branch-copy"
+                  class="gl-m-0! gl-mx-1! js-source-branch-copy gl-align-self-center"
                 />
               </template>
               <template #source>

app/assets/javascripts/vue_shared/issuable/show/components/issuable_title.vue

@@ -81,9 +81,12 @@ export default {
           data-testid="header"
         >
           <div
-            class="issue-sticky-header-text gl-display-flex gl-align-items-center gl-mx-auto gl-px-5"
+            class="issue-sticky-header-text gl-display-flex gl-align-items-baseline gl-mx-auto gl-px-5"
           >
-            <gl-badge class="gl-white-space-nowrap gl-mr-3" :variant="badgeVariant">
+            <gl-badge
+              class="gl-white-space-nowrap gl-mr-3 gl-align-self-center"
+              :variant="badgeVariant"
+            >
               <gl-icon v-if="statusIcon" class="gl-sm-display-none" :name="statusIcon" />
               <span class="gl-display-none gl-sm-display-block">
                 <slot name="status-badge"></slot>

app/views/projects/merge_requests/_mr_box.html.haml

-.detail-page-description.gl-pt-2.gl-pb-4.gl-display-flex.gl-align-items-center.gl-flex-wrap{ class: "#{'is-merge-request' if moved_mr_sidebar_enabled? && !fluid_layout}" }
+.detail-page-description.gl-pt-2.gl-pb-4.gl-display-flex.gl-align-items-baseline.gl-flex-wrap{ class: "#{'is-merge-request' if moved_mr_sidebar_enabled? && !fluid_layout}" }
   = render 'shared/issuable/status_box', issuable: @merge_request
   = merge_request_header(@project, @merge_request)

app/views/shared/issuable/_status_box.html.haml

@@ -2,7 +2,7 @@
 - badge_icon = state_name_with_icon(issuable)[1]
 - badge_variant = issuable.open? ? :success : issuable.merged? ? :info : :danger
 - badge_status_class = issuable.open? ? 'issuable-status-badge-open' : issuable.merged? ? 'issuable-status-badge-merged' : 'issuable-status-badge-closed'
-- badge_classes = "js-mr-status-box issuable-status-badge gl-mr-3 #{badge_status_class} #{'gl-vertical-align-bottom' if issuable.is_a?(MergeRequest)}"
+- badge_classes = "js-mr-status-box issuable-status-badge gl-mr-3 gl-align-self-center #{badge_status_class} #{'gl-vertical-align-bottom' if issuable.is_a?(MergeRequest)}"
 
 = gl_badge_tag({ variant: badge_variant, icon: badge_icon, icon_classes: 'gl-mr-0!' }, { class: badge_classes, data: { project_path: issuable.project.path_with_namespace, iid: issuable.iid, issuable_type: 'merge_request', state: issuable.state } }) do
   %span.gl-display-none.gl-sm-display-block.gl-ml-2