From 407a119b9a47b72a5d404809190dc94ef808b35d Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 28 Aug 2023 21:32:10 -0700
Subject: [PATCH] Fix long document names cause overflow on tasks view

---
 src-ui/src/app/components/manage/tasks/tasks.component.html | 2 +-
 src-ui/src/app/components/manage/tasks/tasks.component.scss | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src-ui/src/app/components/manage/tasks/tasks.component.html b/src-ui/src/app/components/manage/tasks/tasks.component.html
index f6a8b75c8..5a29db110 100644
--- a/src-ui/src/app/components/manage/tasks/tasks.component.html
+++ b/src-ui/src/app/components/manage/tasks/tasks.component.html
@@ -53,7 +53,7 @@
             <label class="form-check-label" for="task{{task.id}}"></label>
           </div>
         </th>
-        <td class="overflow-auto">{{ task.task_file_name }}</td>
+        <td class="overflow-auto name-col">{{ task.task_file_name }}</td>
         <td class="d-none d-lg-table-cell">{{ task.date_created | customDate:'short' }}</td>
         <td class="d-none d-lg-table-cell" *ngIf="activeTab !== 'started' && activeTab !== 'queued'">
           <div *ngIf="task.result?.length > 50" class="result" (click)="expandTask(task); $event.stopPropagation();"
diff --git a/src-ui/src/app/components/manage/tasks/tasks.component.scss b/src-ui/src/app/components/manage/tasks/tasks.component.scss
index 3ca72d9cc..60f8f2297 100644
--- a/src-ui/src/app/components/manage/tasks/tasks.component.scss
+++ b/src-ui/src/app/components/manage/tasks/tasks.component.scss
@@ -20,3 +20,9 @@ pre {
     width: 0.8rem;
     height: 0.8rem;
 }
+
+@media (max-width: 575.98px) {
+    .name-col {
+        max-width: 150px;
+    }
+}