Source-destination compacted

- Narrower max-width
- Element sizes adjusted
- Switched to a more controllable unit for widths and heights

src/components/ActivityListItem.vue

@@ -53,11 +53,11 @@
         </a>
       </div>
 
-      <div class="relative flex justify-between gap-4 mb-5">
+      <div class="relative flex justify-between gap-4 max-w-lg mx-auto mb-5">
         <!-- Source -->
         <a
           href=""
-          class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
+          class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
         >
           <div class="relative w-fit mx-auto">
             <template v-if="record.giver.profileImageUrl">
@@ -65,8 +65,8 @@
                 :profile-image-url="record.giver.profileImageUrl"
                 :class="[
                   !record.providerPlanName
-                    ? 'rounded-full size-12 sm:size-24 object-cover'
-                    : 'rounded size-12 sm:size-24 object-cover',
+                    ? 'rounded-full size-[3rem] sm:size-[4rem] object-cover'
+                    : 'rounded size-[3rem] sm:size-[4rem] object-cover',
                 ]"
               />
             </template>
@@ -76,14 +76,14 @@
                 <ProjectIcon
                   :entityId="record.providerPlanName"
                   :iconSize="48"
-                  class="rounded size-12 sm:size-24 *:w-full *:h-full"
+                  class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
                 />
               </template>
               <!-- Identicon for DIDs -->
               <template v-else-if="record.giver.did">
                 <img
                   :src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
-                  class="rounded-full size-12 sm:size-24"
+                  class="rounded-full size-[3rem] sm:size-[4rem]"
                   alt="Identicon"
                 />
               </template>
@@ -91,12 +91,12 @@
               <template v-else>
                 <fa
                   icon="person-circle-question"
-                  class="text-slate-300 text-5xl sm:text-8xl"
+                  class="text-slate-300 text-[3rem] sm:text-[4rem]"
                 />
               </template>
             </template>
           </div>
-          <div class="text-xs mt-2 line-clamp-2">
+          <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
             <fa
               :icon="record.providerPlanName ? 'building' : 'user'"
               class="fa-fw text-slate-400"
@@ -107,18 +107,20 @@
 
         <!-- Arrow -->
         <div
-          class="absolute inset-28 sm:inset-x-48 mx-4 sm:mx-8 top-1/2 flex items-center"
+          class="absolute inset-28 sm:inset-x-40 mx-2 top-1/2 flex items-center"
         >
-          <hr class="grow border-t-[25px] border-slate-300" />
+          <hr
+            class="grow border-t-[18px] sm:border-t-[24px] border-slate-300"
+          />
           <div
-            class="shrink-0 w-0 h-0 border border-slate-300 border-t-[30px] border-t-transparent border-b-[30px] border-b-transparent border-s-[40px] border-e-0"
+            class="shrink-0 w-0 h-0 border border-slate-300 border-t-[20px] sm:border-t-[30px] border-t-transparent border-b-[20px] sm:border-b-[30px] border-b-transparent border-s-[27px] sm:border-s-[40px] border-e-0"
           ></div>
         </div>
 
         <!-- Destination -->
         <a
           href=""
-          class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
+          class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
         >
           <div class="relative w-fit mx-auto">
             <template v-if="record.receiver.profileImageUrl">
@@ -126,8 +128,8 @@
                 :profile-image-url="record.receiver.profileImageUrl"
                 :class="[
                   !record.recipientProjectName
-                    ? 'rounded-full size-12 sm:size-24 object-cover'
-                    : 'rounded size-12 sm:size-24 object-cover',
+                    ? 'rounded-full size-[3rem] sm:size-[4rem] object-cover'
+                    : 'rounded size-[3rem] sm:size-[4rem] object-cover',
                 ]"
               />
             </template>
@@ -137,14 +139,14 @@
                 <ProjectIcon
                   :entityId="record.recipientProjectName"
                   :iconSize="48"
-                  class="rounded size-12 sm:size-24 *:w-full *:h-full"
+                  class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
                 />
               </template>
               <!-- Identicon for DIDs -->
               <template v-else-if="record.receiver.did">
                 <img
                   :src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
-                  class="rounded-full size-12 sm:size-24"
+                  class="rounded-full size-[3rem] sm:size-[4rem]"
                   alt="Identicon"
                 />
               </template>
@@ -152,12 +154,12 @@
               <template v-else>
                 <fa
                   icon="person-circle-question"
-                  class="text-slate-300 text-5xl sm:text-8xl"
+                  class="text-slate-300 text-[3rem] sm:text-[4rem]"
                 />
               </template>
             </template>
           </div>
-          <div class="text-xs mt-2 line-clamp-2">
+          <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
             <fa
               :icon="record.recipientProjectName ? 'building' : 'user'"
               class="fa-fw text-slate-400"