From 1e0cdab3e7fb2c2ea8eb492c6f9c88ebcfb3f281 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 13 Nov 2024 11:43:57 -0500
Subject: [PATCH] fix word wrapping in invocation panel list items

Fixes https://github.com/galaxyproject/galaxy/issues/18920
---
 .../Invocation/InvocationScrollList.vue       | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Workflow/Invocation/InvocationScrollList.vue b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
index f42dd3b858ed..9e22d80b65a5 100644
--- a/client/src/components/Workflow/Invocation/InvocationScrollList.vue
+++ b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
@@ -204,10 +204,14 @@ function workflowName(workflowId: string) {
                         @click="() => cardClicked(invocation)">
                         <div class="overflow-auto w-100">
                             <Heading bold size="text" icon="fa-sitemap">
-                                <span class="truncate-3-lines">{{ workflowName(invocation.workflow_id) }}</span>
+                                <span class="truncate-n-lines three-lines">
+                                    {{ workflowName(invocation.workflow_id) }}
+                                </span>
                             </Heading>
                             <Heading size="text" icon="fa-hdd">
-                                <small class="text-muted">{{ historyName(invocation.history_id) }}</small>
+                                <small class="text-muted truncate-n-lines two-lines">
+                                    {{ historyName(invocation.history_id) }}
+                                </small>
                             </Heading>
                             <div class="d-flex justify-content-between">
                                 <BBadge v-b-tooltip.noninteractive.hover pill>
@@ -257,12 +261,19 @@ function workflowName(workflowId: string) {
 </template>
 
 <style scoped lang="scss">
-@import "theme/blue.scss";
-
-.truncate-3-lines {
+.truncate-n-lines {
     display: -webkit-box;
-    -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    &.three-lines {
+        -webkit-line-clamp: 3;
+        line-clamp: 3;
+    }
+    &.two-lines {
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+    }
 }
 </style>