Fix long title overflow on narrow screens

artefactual-sdps · Dec 11, 2024 · 237f99a · 237f99a
1 parent 9bc6deb
commit 237f99a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/dashboard/src/components/PreservationActionCollapse.vue b/dashboard/src/components/PreservationActionCollapse.vue
@@ -140,9 +140,11 @@ function isComplete(task: EnduroPackagePreservationTask) {
                 {{ action.tasks.length - index }}
               </span>
             </div>
-            <div class="d-flex flex-column flex-grow-1 align-content-stretch">
+            <div
+              class="d-flex flex-column flex-grow-1 align-content-stretch min-w-0"
+            >
               <div class="d-flex flex-wrap pt-1">
-                <div class="me-auto flex-truncate fw-bold">
+                <div class="me-auto text-truncate fw-bold">
                   {{ task.name }}
                 </div>
                 <div class="me-3">

diff --git a/dashboard/src/styles/main.scss b/dashboard/src/styles/main.scss
@@ -30,7 +30,6 @@ a:not(.btn),
   white-space: break-spaces;
 }
 
-.flex-truncate {
-  @extend .text-truncate;
+.min-w-0 {
   min-width: 0;
 }