From 225b34d480141ff33499cc02223b260d92b8669f Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Tue, 7 Oct 2025 19:00:12 +0800
Subject: [PATCH] feat: improve text overflow handling across UI components

- Add overflow-hidden, text-ellipsis and truncate classes to long text elements in list items and views to prevent text overflow
- Ensure proper text wrapping and ellipsis display for long content
---
 src/components/ActivityListItem.vue |  7 +++++--
 src/components/ContactListItem.vue  |  2 +-
 src/views/ClaimView.vue             | 11 +++++++----
 src/views/DIDView.vue               |  2 +-
 src/views/DiscoverView.vue          |  4 ++--
 src/views/ProjectViewView.vue       | 23 +++++++++++++++++------
 src/views/ProjectsView.vue          |  8 ++++----
 7 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/components/ActivityListItem.vue b/src/components/ActivityListItem.vue
index 39dfcffa..90190022 100644
--- a/src/components/ActivityListItem.vue
+++ b/src/components/ActivityListItem.vue
@@ -78,8 +78,11 @@
       </div>
 
       <!-- Description -->
-      <p class="font-medium">
-        <a class="cursor-pointer" @click="emitLoadClaim(record.jwtId)">
+      <p class="font-medium overflow-hidden">
+        <a
+          class="block cursor-pointer overflow-hidden text-ellipsis"
+          @click="emitLoadClaim(record.jwtId)"
+        >
           {{ description }}
         </a>
       </p>
diff --git a/src/components/ContactListItem.vue b/src/components/ContactListItem.vue
index 11229501..bad24f2d 100644
--- a/src/components/ContactListItem.vue
+++ b/src/components/ContactListItem.vue
@@ -46,7 +46,7 @@
 
             <span class="text-xs truncate">{{ contact.did }}</span>
           </div>
-          <div class="text-sm">
+          <div class="text-sm truncate">
             {{ contact.notes }}
           </div>
         </div>
diff --git a/src/views/ClaimView.vue b/src/views/ClaimView.vue
index ee095764..5fbbb09c 100644
--- a/src/views/ClaimView.vue
+++ b/src/views/ClaimView.vue
@@ -80,16 +80,19 @@
               </button>
             </div>
           </div>
-          <div class="text-sm">
-            <div data-testId="description">
+          <div class="text-sm overflow-hidden">
+            <div
+              data-testId="description"
+              class="overflow-hidden text-ellipsis"
+            >
               <font-awesome icon="message" class="fa-fw text-slate-400" />
               {{ claimDescription }}
             </div>
-            <div>
+            <div class="overflow-hidden text-ellipsis">
               <font-awesome icon="user" class="fa-fw text-slate-400" />
               {{ didInfo(veriClaim.issuer) }}
             </div>
-            <div>
+            <div class="overflow-hidden text-ellipsis">
               <font-awesome icon="calendar" class="fa-fw text-slate-400" />
               Recorded
               {{ formattedIssueDate }}
diff --git a/src/views/DIDView.vue b/src/views/DIDView.vue
index 93de83c3..7d6a5398 100644
--- a/src/views/DIDView.vue
+++ b/src/views/DIDView.vue
@@ -25,7 +25,7 @@
       class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"
     >
       <div>
-        <h2 class="text-xl font-semibold">
+        <h2 class="text-xl font-semibold overflow-hidden text-ellipsis">
           {{ contactFromDid?.name || "(no name)" }}
           <router-link
             :to="{ name: 'contact-edit', params: { did: contactFromDid?.did } }"
diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue
index 778f9eb2..da9209aa 100644
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -231,8 +231,8 @@
                 />
               </div>
 
-              <div class="grow">
-                <h2 class="text-base font-semibold">
+              <div class="grow overflow-hidden">
+                <h2 class="text-base font-semibold truncate">
                   {{ project.name || unnamedProject }}
                 </h2>
                 <div class="text-sm">
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index 13aef08c..79bdfa26 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -17,7 +17,9 @@
           </button>
           Project Idea
         </h1>
-        <h2 class="text-center text-xl font-semibold">
+        <h2
+          class="text-center text-xl font-semibold overflow-hidden text-ellipsis"
+        >
           {{ name }}
           <button
             v-if="activeDid === issuer || activeDid === agentDid"
@@ -139,7 +141,7 @@
         </div>
 
         <div class="text-sm text-slate-500">
-          <div v-if="!expanded">
+          <div v-if="!expanded" class="overflow-hidden text-ellipsis">
             {{ truncatedDesc }}
             <a
               v-if="description.length >= truncateLength"
@@ -148,7 +150,7 @@
               >... Read More</a
             >
           </div>
-          <div v-else>
+          <div v-else class="overflow-hidden text-ellipsis">
             {{ description }}
             <a
               class="uppercase text-xs font-semibold text-slate-700"
@@ -286,7 +288,10 @@
                 />{{ offer.amount }}
               </span>
             </div>
-            <div v-if="offer.objectDescription" class="text-slate-500">
+            <div
+              v-if="offer.objectDescription"
+              class="text-slate-500 overflow-hidden text-ellipsis"
+            >
               <font-awesome icon="comment" class="fa-fw text-slate-400" />
               {{ offer.objectDescription }}
             </div>
@@ -431,7 +436,10 @@
                 <font-awesome icon="calendar" class="fa-fw text-slate-400" />
                 {{ give.issuedAt?.substring(0, 10) }}
               </div>
-              <div v-if="give.description" class="text-slate-500">
+              <div
+                v-if="give.description"
+                class="text-slate-500 overflow-hidden text-ellipsis"
+              >
                 <font-awesome icon="comment" class="fa-fw text-slate-400" />
                 {{ give.description }}
               </div>
@@ -538,7 +546,10 @@
               <font-awesome icon="calendar" class="fa-fw text-slate-400" />
               {{ give.issuedAt?.substring(0, 10) }}
             </div>
-            <div v-if="give.description" class="text-slate-500">
+            <div
+              v-if="give.description"
+              class="text-slate-500 overflow-hidden text-ellipsis"
+            >
               <font-awesome icon="comment" class="fa-fw text-slate-400" />
               {{ give.description }}
             </div>
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index af9882a2..6de24e36 100644
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -107,8 +107,8 @@
               />
             </div>
 
-            <div>
-              <div>
+            <div class="overflow-hidden">
+              <div class="text-sm truncate">
                 To
                 {{
                   offer.fulfillsPlanHandleId
@@ -121,7 +121,7 @@
                       )
                 }}
               </div>
-              <div>
+              <div class="truncate">
                 {{ offer.objectDescription }}
               </div>
 
@@ -243,7 +243,7 @@
             </div>
 
             <div class="grow overflow-hidden">
-              <h2 class="text-base font-semibold">
+              <h2 class="text-base font-semibold truncate">
                 {{ project.name || unnamedProject }}
               </h2>
               <div class="text-sm truncate">