Merge branch 'job-names-auto-width' into 'master'

Design: Pipelines show full job names

See merge request gitlab-org/gitlab!74879

app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue

@@ -67,7 +67,7 @@ export default {
       :class="cssClassJobName"
       class="dropdown-menu-toggle gl-pipeline-job-width! gl-pr-4!"
     >
-      <div class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
+      <div class="gl-display-flex gl-align-items-stretch gl-justify-content-space-between">
         <job-item
           :type="$options.jobItemTypes.jobDropdown"
           :group-tooltip="tooltipText"

app/assets/javascripts/pipelines/components/graph/job_item.vue

@@ -203,7 +203,7 @@ export default {
 <template>
   <div
     :id="computedJobId"
-    class="ci-job-component gl-display-flex gl-align-items-center gl-justify-content-space-between gl-w-full"
+    class="ci-job-component gl-display-flex gl-justify-content-space-between gl-pipeline-job-width"
     data-qa-selector="job_item_container"
   >
     <component
@@ -223,12 +223,12 @@ export default {
     >
       <div class="ci-job-name-component gl-display-flex gl-align-items-center">
         <ci-icon :size="24" :status="job.status" class="gl-line-height-0" />
-        <div class="gl-pl-3 gl-display-flex gl-flex-direction-column gl-w-full">
-          <div class="gl-text-truncate gl-w-70p gl-line-height-normal">{{ job.name }}</div>
+        <div class="gl-pl-3 gl-pr-3 gl-display-flex gl-flex-direction-column gl-pipeline-job-width">
+          <div class="gl-text-truncate gl-pr-9 gl-line-height-normal">{{ job.name }}</div>
           <div
             v-if="showStageName"
             data-testid="stage-name-in-job"
-            class="gl-text-truncate gl-w-70p gl-font-sm gl-text-gray-500 gl-line-height-normal"
+            class="gl-text-truncate gl-pr-9 gl-font-sm gl-text-gray-500 gl-line-height-normal"
           >
             {{ stageName }}
           </div>

app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue

@@ -124,7 +124,7 @@ export default {
   <div
     ref="linkedPipeline"
     v-gl-tooltip
-    class="gl-pipeline-job-width"
+    class="gl-downstream-pipeline-job-width"
     :title="tooltipText"
     data-qa-selector="child_pipeline"
     @mouseover="onDownstreamHovered"
@@ -134,7 +134,7 @@ export default {
       class="gl-relative gl-bg-white gl-p-3 gl-border-solid gl-border-gray-100 gl-border-1"
       :class="{ 'gl-pl-9': isUpstream }"
     >
-      <div class="gl-display-flex">
+      <div class="gl-display-flex gl-pr-7 gl-pipeline-job-width">
         <ci-status
           v-if="!pipelineIsLoading"
           :status="pipelineStatus"
@@ -142,7 +142,9 @@ export default {
           css-classes="gl-top-0 gl-pr-2"
         />
         <div v-else class="gl-pr-2"><gl-loading-icon size="sm" inline /></div>
-        <div class="gl-display-flex gl-flex-direction-column gl-w-13">
+        <div
+          class="gl-display-flex gl-flex-direction-column gl-pipeline-job-width gl-text-truncate"
+        >
           <span class="gl-text-truncate" data-testid="downstream-title">
             {{ downstreamTitle }}
           </span>

app/assets/javascripts/pipelines/components/pipeline_graph/pipeline_graph.vue

@@ -25,7 +25,7 @@ export default {
   // The max width and the width make sure the ellipsis to work and the min width
   // is for when there is less text than the stage column width (which the width 100% does not fix)
   jobWrapperClasses:
-    'gl-display-flex gl-flex-direction-column gl-align-items-center gl-w-full gl-px-8 gl-min-w-full gl-max-w-15',
+    'gl-display-flex gl-flex-direction-column gl-align-items-stretch gl-w-full gl-px-8 gl-min-w-full gl-max-w-15',
   props: {
     pipelineData: {
       required: true,

app/assets/stylesheets/page_bundles/_pipeline_mixins.scss

@@ -113,8 +113,8 @@
  - mini graph in Commit widget pipeline
 */
 @mixin pipeline-graph-dropdown-menu() {
-  width: 240px;
-  max-width: 240px;
+  width: auto;
+  max-width: 400px;
 
   // override dropdown.scss
   &.dropdown-menu li button,
@@ -185,8 +185,6 @@
       }
 
       .ci-status-icon {
-        @include gl-mr-3;
-
         position: relative;
 
         > svg {

app/assets/stylesheets/page_bundles/pipeline.scss

@@ -129,11 +129,17 @@
 }
 
 .gl-pipeline-job-width {
-  width: 186px;
+  width: 100%;
+  max-width: 400px;
 }
 
 .gl-pipeline-job-width\! {
-  width: 186px !important;
+  width: 100% !important;
+  max-width: 400px !important;
+}
+
+.gl-downstream-pipeline-job-width {
+  width: 240px;
 }
 
 .gl-linked-pipeline-padding {
@@ -199,7 +205,6 @@
 
 .big-pipeline-graph-dropdown-menu {
   @include pipeline-graph-dropdown-menu();
-  width: 195px;
   min-width: 195px;
   left: 100%;
   top: -10px;