From 996e68ff300d63ba9a9350dfb0f1f612d9c78994 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Thu, 12 Jan 2023 12:33:21 +0100
Subject: [PATCH] Truncate long jobNames

- Solves issue #79
---
 web/frontend/src/joblist/JobInfo.svelte | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/web/frontend/src/joblist/JobInfo.svelte b/web/frontend/src/joblist/JobInfo.svelte
index 58472e5..da45ff6 100644
--- a/web/frontend/src/joblist/JobInfo.svelte
+++ b/web/frontend/src/joblist/JobInfo.svelte
@@ -1,4 +1,4 @@
-<!-- 
+<!--
     @component
 
     Properties:
@@ -31,7 +31,11 @@
         <span class="fw-bold"><a href="/monitoring/job/{job.id}" target="_blank">{job.jobId}</a> ({job.cluster})</span>
         {#if job.metaData?.jobName}
             <br/>
-            {job.metaData.jobName}
+            {#if job.metaData?.jobName.length <= 25}
+                <div>{job.metaData.jobName}</div>
+            {:else}
+                <div class="truncate" style="cursor:help; width:230px;" title={job.metaData.jobName}>{job.metaData.jobName}</div>
+            {/if}
         {/if}
         {#if job.arrayJobId}
             Array Job: <a href="/monitoring/jobs/?arrayJobId={job.arrayJobId}&cluster={job.cluster}" target="_blank">#{job.arrayJobId}</a>
@@ -86,3 +90,11 @@
         {/each}
     </p>
 </div>
+
+<style>
+    .truncate {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+</style>