From 3da1daec04e0c1f68c9cfdb758e533045356d22e Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Fri, 6 Sep 2024 13:00:12 -0400
Subject: [PATCH] Fix leading of CiIcon text and make sure it is vertically
 centered

Prevent the text in a CiIcon component from inheriting line height from
a parent element, and make sure that it is vertically centered.

Changelog: fixed
---
 app/assets/javascripts/ci/job_details/components/job_header.vue | 2 +-
 .../javascripts/vue_shared/components/ci_icon/ci_icon.vue       | 2 +-
 app/helpers/ci/status_helper.rb                                 | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/ci/job_details/components/job_header.vue b/app/assets/javascripts/ci/job_details/components/job_header.vue
index 1f6151a8397e78c9..046f4baedb307b0b 100644
--- a/app/assets/javascripts/ci/job_details/components/job_header.vue
+++ b/app/assets/javascripts/ci/job_details/components/job_header.vue
@@ -110,7 +110,7 @@ export default {
       </div>
     </div>
     <section class="header-main-content gl-mr-3 gl-flex gl-items-center">
-      <ci-icon class="gl-mr-3 gl-leading-1" :status="status" show-status-text />
+      <ci-icon class="gl-mr-3" :status="status" show-status-text />
 
       <template v-if="shouldRenderTriggeredLabel">{{ __('Started') }}</template>
       <template v-else>{{ __('Created') }}</template>
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon/ci_icon.vue
index 13dcfd88de1263f5..e78c40adf9cbbb7d 100644
--- a/app/assets/javascripts/vue_shared/components/ci_icon/ci_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_icon/ci_icon.vue
@@ -112,7 +112,7 @@ export default {
     <span class="ci-icon-gl-icon-wrapper"><gl-icon :name="icon" /></span
     ><span
       v-if="showStatusText"
-      class="gl-ml-2 gl-mr-3 gl-whitespace-nowrap"
+      class="gl-ml-2 gl-mr-3 gl-self-center gl-whitespace-nowrap gl-leading-1"
       data-testid="ci-icon-text"
       >{{ status.text }}</span
     >
diff --git a/app/helpers/ci/status_helper.rb b/app/helpers/ci/status_helper.rb
index 96d574b77f5dd932..b5e772fb8ac001ca 100644
--- a/app/helpers/ci/status_helper.rb
+++ b/app/helpers/ci/status_helper.rb
@@ -81,7 +81,7 @@ def render_ci_icon(
 
       content_tag(content_tag_variant, href: path, class: badge_classes, title: title, data: data) do
         if show_status_text
-          content_tag(:span, ci_icon_for_status(status), { class: icon_wrapper_class }) + content_tag(:span, status.label, { class: 'gl-mx-2 gl-whitespace-nowrap', data: { testid: 'ci-icon-text' } })
+          content_tag(:span, ci_icon_for_status(status), { class: icon_wrapper_class }) + content_tag(:span, status.label, { class: 'gl-mx-2 gl-whitespace-nowrap gl-leading-1 gl-self-center', data: { testid: 'ci-icon-text' } })
         else
           content_tag(:span, ci_icon_for_status(status), { class: icon_wrapper_class })
         end
-- 
GitLab