Initial pass for tooltip changes

Makes changes for truncation and combines the two related CSS classes.
Applies new tooltip comp as close as possible to the span for testing.

2 files changed, 8 insertions, 4 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/job_item.vue b/app/assets/javascripts/pipelines/components/graph/job_item.vue
index 2b32a6e4a98..0d5afe04e8e 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_item.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_item.vue
@@ -57,6 +57,9 @@ export default {
     },
   },
   computed: {
+    boundary() {
+      return this.dropdownLength === 1 ? 'viewport' : 'scrollParent';
+    },
     status() {
       return this.job && this.job.status ? this.job.status : {};
     },
@@ -104,7 +107,7 @@ export default {
   <div class="ci-job-component">
     <gl-link
       v-if="status.has_details"
-      v-gl-tooltip
+      v-gl-tooltip="{ boundary, placement: 'bottom' }"
       :href="status.details_path"
       :title="tooltipText"
       :class="cssClassJobName"
@@ -115,7 +118,7 @@ export default {
 
     <div
       v-else
-      v-gl-tooltip
+      v-gl-tooltip="{ boundary, placement: 'bottom' }"
       :title="tooltipText"
       :class="cssClassJobName"
       class="js-job-component-tooltip non-details-job-component"
diff --git a/app/assets/javascripts/pipelines/components/graph/job_name_component.vue b/app/assets/javascripts/pipelines/components/graph/job_name_component.vue
index 1bfab2a7fc0..02451839330 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_name_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_name_component.vue
@@ -27,7 +27,8 @@ export default {
 <template>
   <span class="ci-job-name-component">
     <ci-icon :status="status" />
-
-    <span class="ci-status-text"> {{ name }} </span>
+    <span class="ci-status-text text-truncate mw-70p gl-pl-1 d-inline-block align-bottom">
+      {{ name }}
+    </span>
   </span>
 </template>