Refactor css to utilities classes in CI header

app/assets/javascripts/vue_shared/components/header_ci_component.vue

@@ -97,7 +97,11 @@ export default {
 </script>
 
 <template>
-  <header class="page-content-header ci-header-container" data-testid="pipeline-header-content">
+  <header
+    class="page-content-header gl-display-flex gl-min-h-7"
+    data-qa-selector="pipeline_header"
+    data-testid="ci-header-content"
+  >
     <section class="header-main-content">
       <ci-icon-badge :status="status" />
 

app/assets/stylesheets/pages/pipelines.scss

@@ -114,21 +114,6 @@
   }
 }
 
-/**
- * Pipelines / Jobs header
- */
-[data-page='projects:pipelines:show'],
-[data-page='projects:jobs:show'] {
-  .ci-header-container {
-    min-height: $gl-spacing-scale-7;
-    display: flex;
-
-    .text-center {
-      padding-top: 12px;
-    }
-  }
-}
-
 .pipelines-container .top-area .nav-controls > .btn:last-child {
   float: none;
 }

qa/qa/page/project/pipeline/show.rb

@@ -8,7 +8,7 @@ module QA
           include Component::CiBadgeLink
 
           view 'app/assets/javascripts/vue_shared/components/header_ci_component.vue' do
-            element :pipeline_header, /header class.*ci-header-container.*/ # rubocop:disable QA/ElementWithPattern
+            element :pipeline_header
           end
 
           view 'app/assets/javascripts/pipelines/components/graph/graph_component.vue' do
@@ -35,7 +35,7 @@ module QA
           end
 
           def running?(wait: 0)
-            within('.ci-header-container') do
+            within_element(:pipeline_header) do
               page.has_content?('running', wait: wait)
             end
           end

spec/features/projects/pipelines/pipeline_spec.rb

@@ -178,7 +178,7 @@ RSpec.describe 'Pipeline', :js do
       it 'pipeline header shows the user status and emoji' do
         visit project_pipeline_path(project, pipeline)
 
-        within '[data-testid="pipeline-header-content"]' do
+        within '[data-testid="ci-header-content"]' do
           expect(page).to have_selector("[data-testid='#{status.message}']")
           expect(page).to have_selector("[data-name='#{status.emoji}']")
         end