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,125 +174,127 @@
         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">
-              <input
-                v-if="!showGiveNumbers"
-                type="checkbox"
-                :checked="contactsSelected.includes(contact.did)"
-                class="ml-2 h-6 w-6 flex-shrink-0"
-                data-testId="contactCheckOne"
-                @click="
-                  contactsSelected.includes(contact.did)
-                    ? contactsSelected.splice(
-                        contactsSelected.indexOf(contact.did),
-                        1,
-                      )
-                    : contactsSelected.push(contact.did)
-                "
-              />
-
-              <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"
-                  @click="showLargeIdenticon = contact"
-                />
-              </div>
+        <div class="flex items-center justify-between gap-3">
+          <div class="flex overflow-hidden min-w-0 items-center gap-3">
+            <input
+              v-if="!showGiveNumbers"
+              type="checkbox"
+              :checked="contactsSelected.includes(contact.did)"
+              class="ml-2 h-6 w-6 flex-shrink-0"
+              data-testId="contactCheckOne"
+              @click="
+                contactsSelected.includes(contact.did)
+                  ? contactsSelected.splice(
+                      contactsSelected.indexOf(contact.did),
+                      1,
+                    )
+                  : contactsSelected.push(contact.did)
+              "
+            />
+
+            <EntityIcon
+              :contact="contact"
+              :icon-size="48"
+              class="shrink-0 align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
+              @click="showLargeIdenticon = contact"
+            />
 
-              <h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0">
-                {{ contactNameNonBreakingSpace(contact.name) }}
+            <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-2 items-center">
-                  <router-link
-                    :to="{
-                      path: '/did/' + encodeURIComponent(contact.did),
-                    }"
-                    title="See more about this person"
-                  >
-                    <font-awesome
-                      icon="circle-info"
-                      class="text-xl text-blue-500"
-                    />
-                  </router-link>
-
-                  <span class="text-sm overflow-hidden">{{
-                    libsUtil.shortDid(contact.did)
-                  }}</span>
-                </div>
-                <div class="text-sm">
-                  {{ contact.notes }}
-                </div>
-              </span>
+              <div class="flex gap-1.5 items-center overflow-hidden">
+                <router-link
+                  :to="{
+                    path: '/did/' + encodeURIComponent(contact.did),
+                  }"
+                  title="See more about this person"
+                >
+                  <font-awesome
+                    icon="circle-info"
+                    class="text-base text-blue-500"
+                  />
+                </router-link>
+
+                <span class="text-xs truncate">{{
+                  contact.did
+                }}</span>
+              </div>
+              <div class="text-sm">
+                {{ contact.notes }}
+              </div>
             </div>
+          </div>
 
-            <div
-              v-if="showGiveNumbers && contact.did != activeDid"
-              class="flex gap-2 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"
-                :title="givenToMeDescriptions[contact.did] || ''"
-                @click="confirmShowGiftedDialog(contact.did, activeDid)"
-              >
-                From:
-                <br />
-                {{
-                  /* eslint-disable prettier/prettier */
-                  showGiveTotals
-                    ? ((givenToMeConfirmed[contact.did] || 0)
-                        + (givenToMeUnconfirmed[contact.did] || 0))
-                    : showGiveConfirmed
-                        ? (givenToMeConfirmed[contact.did] || 0)
-                        : (givenToMeUnconfirmed[contact.did] || 0)
-                  /* eslint-enable prettier/prettier */
-                }}
-              </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"
-                :title="givenByMeDescriptions[contact.did] || ''"
-                @click="confirmShowGiftedDialog(activeDid, contact.did)"
-              >
-                To:
-                <br />
-                {{
-                  /* eslint-disable prettier/prettier */
-                  showGiveTotals
-                    ? ((givenByMeConfirmed[contact.did] || 0)
-                      + (givenByMeUnconfirmed[contact.did] || 0))
-                    : showGiveConfirmed
-                        ? (givenByMeConfirmed[contact.did] || 0)
-                        : (givenByMeUnconfirmed[contact.did] || 0)
-                  /* eslint-enable prettier/prettier */
-                }}
-              </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 px-2 py-1.5 rounded-md border border-blue-400"
-                data-testId="offerButton"
-                @click="openOfferDialog(contact.did, contact.name)"
-              >
-                Offer
-              </button>
-
-              <router-link
-                :to="{
-                  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"
-                title="See more given activity"
-              >
-                <font-awesome icon="file-lines" class="fa-fw" />
-              </router-link>
+          <div
+            v-if="showGiveNumbers && contact.did != activeDid"
+            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.5 py-1.5 rounded-l-md"
+                  :title="givenToMeDescriptions[contact.did] || ''"
+                  @click="confirmShowGiftedDialog(contact.did, activeDid)"
+                >
+                  {{
+                    /* eslint-disable prettier/prettier */
+                    showGiveTotals
+                      ? ((givenToMeConfirmed[contact.did] || 0)
+                          + (givenToMeUnconfirmed[contact.did] || 0))
+                      : showGiveConfirmed
+                          ? (givenToMeConfirmed[contact.did] || 0)
+                          : (givenToMeUnconfirmed[contact.did] || 0)
+                    /* eslint-enable prettier/prettier */
+                  }}
+                </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 px-2.5 py-1.5 rounded-r-md border-l"
+                  :title="givenByMeDescriptions[contact.did] || ''"
+                  @click="confirmShowGiftedDialog(activeDid, contact.did)"
+                >
+                  {{
+                    /* eslint-disable prettier/prettier */
+                    showGiveTotals
+                      ? ((givenByMeConfirmed[contact.did] || 0)
+                        + (givenByMeUnconfirmed[contact.did] || 0))
+                      : showGiveConfirmed
+                          ? (givenByMeConfirmed[contact.did] || 0)
+                          : (givenByMeUnconfirmed[contact.did] || 0)
+                    /* 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"
+              data-testId="offerButton"
+              @click="openOfferDialog(contact.did, contact.name)"
+            >
+              Offer
+            </button>
+
+            <router-link
+              :to="{
+                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"
+              title="See more given activity"
+            >
+              <font-awesome icon="file-lines" class="fa-fw" />
+            </router-link>
           </div>
         </div>
       </li>