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

@@ -78,8 +78,11 @@
       </div>
 
       <!-- Description -->
-      <p class="font-medium">
+      <p class="font-medium overflow-hidden">
-        <a class="cursor-pointer" @click="emitLoadClaim(record.jwtId)">
+        <a
+          class="block cursor-pointer overflow-hidden text-ellipsis"
+          @click="emitLoadClaim(record.jwtId)"
+        >
           {{ description }}
         </a>
       </p>

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>

src/views/ClaimView.vue

@@ -80,16 +80,19 @@
               </button>
             </div>
           </div>
-          <div class="text-sm">
+          <div class="text-sm overflow-hidden">
-            <div data-testId="description">
+            <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 }}

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 } }"

src/views/DiscoverView.vue

@@ -231,8 +231,8 @@
                 />
               </div>
 
-              <div class="grow">
+              <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">

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>

src/views/ProjectsView.vue

@@ -107,8 +107,8 @@
               />
             </div>
 
-            <div>
+            <div class="overflow-hidden">
-              <div>
+              <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">