From 6ea23c1aac26affacb076e3d9ada9d4a313b025e Mon Sep 17 00:00:00 2001
From: Lukas <lukas@slucky.de>
Date: Thu, 27 Oct 2022 00:49:26 +0200
Subject: [PATCH] Fix display of long pipeline and job names (#1346)

---
 .../repo/pipeline/PipelineProcList.vue        | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/web/src/components/repo/pipeline/PipelineProcList.vue b/web/src/components/repo/pipeline/PipelineProcList.vue
index c36408bf3..f71800a2c 100644
--- a/web/src/components/repo/pipeline/PipelineProcList.vue
+++ b/web/src/components/repo/pipeline/PipelineProcList.vue
@@ -64,15 +64,16 @@
           <button
             v-if="pipeline.procs && pipeline.procs.length > 1"
             type="button"
-            class="flex items-center py-2 pl-1 hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5 rounded-md"
+            :title="proc.name"
+            class="flex items-center gap-2 py-2 px-1 hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5 rounded-md"
             @click="procsCollapsed[proc.id] = !!!procsCollapsed[proc.id]"
           >
             <Icon
               name="chevron-right"
-              class="transition-transform duration-150 mr-2"
+              class="transition-transform duration-150 min-w-6 h-6"
               :class="{ 'transform rotate-90': !procsCollapsed[proc.id] }"
             />
-            {{ proc.name }}
+            <span class="truncate">{{ proc.name }}</span>
           </button>
         </div>
         <div
@@ -87,7 +88,8 @@
             v-for="job in proc.children"
             :key="job.pid"
             type="button"
-            class="flex p-2 border-2 border-transparent rounded-md items-center hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5 w-full"
+            :title="job.name"
+            class="flex p-2 gap-2 border-2 border-transparent rounded-md items-center hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5 w-full"
             :class="{
               'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-5': selectedProcId && selectedProcId === job.pid,
               'mt-1':
@@ -95,14 +97,16 @@
             }"
             @click="$emit('update:selected-proc-id', job.pid)"
           >
-            <div v-if="['success'].includes(job.state)" class="w-2 h-2 bg-lime-400 rounded-full" />
-            <div v-if="['pending', 'skipped'].includes(job.state)" class="w-2 h-2 bg-gray-400 rounded-full" />
             <div
-              v-if="['killed', 'error', 'failure', 'blocked', 'declined'].includes(job.state)"
-              class="w-2 h-2 bg-red-400 rounded-full"
+              class="min-w-2 h-2 rounded-full"
+              :class="{
+                'bg-lime-400': ['success'].includes(job.state),
+                'bg-gray-400': ['pending', 'skipped'].includes(job.state),
+                'bg-red-400': ['killed', 'error', 'failure', 'blocked', 'declined'].includes(job.state),
+                'bg-blue-400': ['started', 'running'].includes(job.state),
+              }"
             />
-            <div v-if="['started', 'running'].includes(job.state)" class="w-2 h-2 bg-blue-400 rounded-full" />
-            <span class="ml-2">{{ job.name }}</span>
+            <span class="truncate">{{ job.name }}</span>
             <PipelineProcDuration :proc="job" />
           </button>
         </div>