diff --git a/app/assets/javascripts/jobs/components/job_container_item.vue b/app/assets/javascripts/jobs/components/job_container_item.vue
index 79e6623eca8..6b61dc5902b 100644
--- a/app/assets/javascripts/jobs/components/job_container_item.vue
+++ b/app/assets/javascripts/jobs/components/job_container_item.vue
@@ -1,6 +1,5 @@
 <script>
-import { GlLink, GlIcon } from '@gitlab/ui';
-import tooltip from '~/vue_shared/directives/tooltip';
+import { GlLink, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
 import { sprintf } from '~/locale';
@@ -12,7 +11,7 @@ export default {
     GlLink,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   mixins: [delayedJobMixin],
   props: {
@@ -49,10 +48,9 @@ export default {
     }"
   >
     <gl-link
-      v-tooltip
+      v-gl-tooltip
       :href="job.status.details_path"
       :title="tooltipText"
-      data-boundary="viewport"
       class="js-job-link d-flex"
     >
       <gl-icon
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss
index acd8e18366c..1cb90e849ab 100644
--- a/app/assets/stylesheets/_page_specific_files.scss
+++ b/app/assets/stylesheets/_page_specific_files.scss
@@ -40,7 +40,6 @@
 @import './pages/profiles/preferences';
 @import './pages/projects';
 @import './pages/prometheus';
-@import './pages/reports';
 @import './pages/runners';
 @import './pages/search';
 @import './pages/service_desk';
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
index 65ae34c1a80..bebb915bce6 100644
--- a/app/assets/stylesheets/page_bundles/pipeline.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -385,3 +385,44 @@
   right: 13px;
   top: 8px;
 }
+
+
+.split-report-section {
+  border-bottom: 1px solid var(--gray-50, $gray-50);
+
+  .report-block-container {
+    max-height: 500px;
+    overflow: auto;
+  }
+
+  .space-children,
+  .space-children > span {
+    display: flex;
+    align-self: center;
+  }
+
+  .media {
+    align-items: center;
+    padding: 10px;
+    line-height: 20px;
+
+    /*
+    This fixes the wrapping div of the icon in the report header.
+    Apparently the borderless status icons are half the size of the status icons with border.
+    This means we have to double the size of the wrapping div for borderless icons.
+    */
+    .space-children:first-child {
+      width: 32px;
+      height: 32px;
+      align-items: center;
+      justify-content: center;
+      margin-right: 5px;
+      margin-left: 1px;
+    }
+  }
+
+  .code-text {
+    width: 100%;
+    flex: 1;
+  }
+}
diff --git a/app/assets/stylesheets/pages/reports.scss b/app/assets/stylesheets/page_bundles/reports.scss
similarity index 62%
rename from app/assets/stylesheets/pages/reports.scss
rename to app/assets/stylesheets/page_bundles/reports.scss
index 0c0605b0b3d..5a9dd454970 100644
--- a/app/assets/stylesheets/pages/reports.scss
+++ b/app/assets/stylesheets/page_bundles/reports.scss
@@ -1,42 +1,4 @@
-.split-report-section {
-  border-bottom: 1px solid $gray-darker;
-
-  .report-block-container {
-    max-height: 500px;
-    overflow: auto;
-  }
-
-  .space-children,
-  .space-children > span {
-    display: flex;
-    align-self: center;
-  }
-
-  .media {
-    align-items: center;
-    padding: 10px;
-    line-height: 20px;
-
-    /*
-    This fixes the wrapping div of the icon in the report header.
-    Apparently the borderless status icons are half the size of the status icons with border.
-    This means we have to double the size of the wrapping div for borderless icons.
-    */
-    .space-children:first-child {
-      width: 32px;
-      height: 32px;
-      align-items: center;
-      justify-content: center;
-      margin-right: 5px;
-      margin-left: 1px;
-    }
-  }
-
-  .code-text {
-    width: 100%;
-    flex: 1;
-  }
-}
+@import 'mixins_and_variables_and_functions';
 
 .mr-widget-grouped-section {
   .report-block-container {
@@ -69,15 +31,15 @@
   display: flex;
 
   &.failed svg {
-    color: $red-500;
+    color: var(--red-500, $red-500);
   }
 
   &.success svg {
-    color: $green-500;
+    color: var(--green-500, $green-500);
   }
 
   &.neutral svg {
-    color: $gray-500;
+    color: var(--gray-500, $gray-500);
   }
 
   .ci-status-icon {
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 06513d56221..d33023f66d6 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -9,6 +9,7 @@
 - number_of_pipelines = @pipelines.size
 - mr_action = j(params[:tab].presence || 'show')
 - add_page_specific_style 'page_bundles/pipelines'
+- add_page_specific_style 'page_bundles/reports'
 
 .merge-request{ data: { mr_action: mr_action, url: merge_request_path(@merge_request, format: :json), project_path: project_path(@merge_request.project), lock_version: @merge_request.lock_version } }
   = render "projects/merge_requests/mr_title"
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index add84292849..34f7744f825 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -3,6 +3,7 @@
 - page_title _('Pipeline')
 - pipeline_has_errors = @pipeline.builds.empty? && @pipeline.yaml_errors.present?
 - add_page_specific_style 'page_bundles/pipeline'
+- add_page_specific_style 'page_bundles/reports'
 
 .js-pipeline-container{ data: { controller_action: "#{controller.action_name}" } }
   #js-pipeline-header-vue.pipeline-header-container{ data: {full_path: @project.full_path, retry_path: retry_project_pipeline_path(@pipeline.project, @pipeline), cancel_path: cancel_project_pipeline_path(@pipeline.project, @pipeline), delete_path: project_pipeline_path(@pipeline.project, @pipeline), pipeline_iid: @pipeline.iid, pipeline_id: @pipeline.id} }
diff --git a/config/application.rb b/config/application.rb
index 798deada81b..9015c036665 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -184,6 +184,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/pipeline.css"
     config.assets.precompile << "page_bundles/pipelines.css"
     config.assets.precompile << "page_bundles/todos.css"
+    config.assets.precompile << "page_bundles/reports.css"
     config.assets.precompile << "page_bundles/xterm.css"
     config.assets.precompile << "lazy_bundles/cropper.css"
     config.assets.precompile << "performance_bar.css"
diff --git a/spec/features/projects/jobs/user_browses_job_spec.rb b/spec/features/projects/jobs/user_browses_job_spec.rb
index b935b99642b..9b199157d79 100644
--- a/spec/features/projects/jobs/user_browses_job_spec.rb
+++ b/spec/features/projects/jobs/user_browses_job_spec.rb
@@ -43,7 +43,7 @@ RSpec.describe 'User browses a job', :js do
       wait_for_all_requests
       within('.builds-container') do
         expect(page).to have_selector(
-          ".build-job > a[data-original-title='test - failed - (unknown failure)']")
+          ".build-job > a[title='test - failed - (unknown failure)']")
       end
     end
   end
@@ -55,7 +55,7 @@ RSpec.describe 'User browses a job', :js do
       wait_for_all_requests
       within('.builds-container') do
         expect(page).to have_selector(
-          ".build-job > a[data-original-title='test - failed - (unknown failure) (retried)']")
+          ".build-job > a[title='test - failed - (unknown failure) (retried)']")
       end
     end
   end
diff --git a/spec/frontend/jobs/components/job_container_item_spec.js b/spec/frontend/jobs/components/job_container_item_spec.js
index 9019504d22d..41b399fa32b 100644
--- a/spec/frontend/jobs/components/job_container_item_spec.js
+++ b/spec/frontend/jobs/components/job_container_item_spec.js
@@ -90,7 +90,7 @@ describe('JobContainerItem', () => {
 
       Vue.nextTick()
         .then(() => {
-          expect(vm.$el.querySelector('.js-job-link').getAttribute('data-original-title')).toEqual(
+          expect(vm.$el.querySelector('.js-job-link').getAttribute('title')).toEqual(
             'delayed job - delayed manual action (00:22:17)',
           );
         })