Fix long document names cause overflow on tasks view

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 f6a8b75c857f48b4262d96e36a2710fbf35e5a7c..5a29db110b55ac6afd8620e8c3c5d3d9cdd5d56d 100644 (file)
--- 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 3ca72d9cc0d0a38df4e79a887d55b0f6a5b7fd73..60f8f22976883ed79ae49a3fa688414bf3cdc554 100644 (file)
--- 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;
+    }
+}