Optimized per-item layout

- Stacked contact name and DID
- Text truncates to leave room for action buttons when visible
- Separated "from / to" heading from buttons to minimize width
- Various spacing and alignment adjustments

src/views/ContactsView.vue

@@ -174,9 +174,8 @@
         class="border-b border-slate-300 pt-1 pb-1"
         data-testId="contactListItem"
       >
-        <div class="grow overflow-hidden">
         <div class="flex items-center justify-between gap-3">
-            <div class="flex items-center gap-3">
+          <div class="flex overflow-hidden min-w-0 items-center gap-3">
             <input
               v-if="!showGiveNumbers"
               type="checkbox"
@@ -193,23 +192,26 @@
               "
             />
 
-              <div
-                class="flex-shrink-0 w-12 h-12 flex items-center justify-center"
-              >
             <EntityIcon
               :contact="contact"
               :icon-size="48"
-                  class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
+              class="shrink-0 align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
               @click="showLargeIdenticon = contact"
             />
-              </div>
 
-              <h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0">
+            <div class="overflow-hidden">
+              <h2 class="text-base font-semibold truncate">
+                <router-link
+                  :to="{
+                    path: '/did/' + encodeURIComponent(contact.did),
+                  }"
+                  title="See more about this person"
+                >
                   {{ contactNameNonBreakingSpace(contact.name) }}
+                </router-link>
               </h2>
 
-              <span>
+              <div class="flex gap-1.5 items-center overflow-hidden">
-                <div class="flex gap-2 items-center">
                 <router-link
                   :to="{
                     path: '/did/' + encodeURIComponent(contact.did),
@@ -218,31 +220,32 @@
                 >
                   <font-awesome
                     icon="circle-info"
-                      class="text-xl text-blue-500"
+                    class="text-base text-blue-500"
                   />
                 </router-link>
 
-                  <span class="text-sm overflow-hidden">{{
+                <span class="text-xs truncate">{{
-                    libsUtil.shortDid(contact.did)
+                  contact.did
                 }}</span>
               </div>
               <div class="text-sm">
                 {{ contact.notes }}
               </div>
-              </span>
+            </div>
           </div>
 
           <div
             v-if="showGiveNumbers && contact.did != activeDid"
-              class="flex gap-2 items-center"
+            class="flex gap-1.5 items-end"
           >
+            <div class='text-center'>
+              <div class="text-xs leading-none mb-1">From/To</div>
+              <div class="flex items-center">
                 <button
-                class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-l-md"
+                  class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2.5 py-1.5 rounded-l-md"
                   :title="givenToMeDescriptions[contact.did] || ''"
                   @click="confirmShowGiftedDialog(contact.did, activeDid)"
                 >
-                From:
-                <br />
                   {{
                     /* eslint-disable prettier/prettier */
                     showGiveTotals
@@ -256,12 +259,10 @@
                 </button>
 
                 <button
-                class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white -ml-1.5 px-2 py-1.5 rounded-r-md border-l"
+                  class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2.5 py-1.5 rounded-r-md border-l"
                   :title="givenByMeDescriptions[contact.did] || ''"
                   @click="confirmShowGiftedDialog(activeDid, contact.did)"
                 >
-                To:
-                <br />
                   {{
                     /* eslint-disable prettier/prettier */
                     showGiveTotals
@@ -273,9 +274,11 @@
                     /* eslint-enable prettier/prettier */
                   }}
                 </button>
+              </div>
+            </div>
 
             <button
-                class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md border border-blue-400"
+              class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md"
               data-testId="offerButton"
               @click="openOfferDialog(contact.did, contact.name)"
             >
@@ -287,14 +290,13 @@
                 name: 'contact-amounts',
                 query: { contactDid: contact.did },
               }"
-                class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md border border-slate-400"
+              class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md"
               title="See more given activity"
             >
               <font-awesome icon="file-lines" class="fa-fw" />
             </router-link>
           </div>
         </div>
-        </div>
       </li>
     </ul>
     <p v-else>There are no contacts.</p>