Adjustments to source-destination graphic

src/components/ActivityListItem.vue

@@ -62,10 +62,10 @@
         </a>
       </div>
 
-      <div class="relative flex justify-between gap-4 max-w-lg mx-auto mb-5">
+      <div class="relative flex justify-between gap-4 max-w-[40rem] mx-auto mb-5">
         <!-- Source -->
         <div
-          class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
+          class="w-[8rem] sm:w-[12rem] text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
         >
           <div class="relative w-fit mx-auto">
             <div>
@@ -96,7 +96,7 @@
           </div>
           <div
             v-if="record.providerPlanName || record.giver.known"
-            class="text-xs mt-2 line-clamp-3 sm:line-clamp-2"
+            class="text-xs mt-2 truncate"
           >
             <font-awesome
               :icon="record.providerPlanName ? 'users' : 'user'"
@@ -108,9 +108,9 @@
 
         <!-- Arrow -->
         <div
-          class="absolute inset-x-28 sm:inset-x-40 mx-2 top-1/2 -translate-y-1/2"
+          class="absolute inset-x-[8rem] sm:inset-x-[12rem] mx-2 top-1/2 -translate-y-1/2"
         >
-          <div class="text-sm text-center leading-none font-semibold">
+          <div class="text-sm text-center leading-none font-semibold pe-[15px]">
             {{ fetchAmount }}
           </div>
 
@@ -127,7 +127,7 @@
 
         <!-- Destination -->
         <div
-          class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
+          class="w-[8rem] sm:w-[12rem] text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
         >
           <div class="relative w-fit mx-auto">
             <div>
@@ -158,7 +158,7 @@
           </div>
           <div
             v-if="record.recipientProjectName || record.receiver.known"
-            class="text-xs mt-2 line-clamp-3 sm:line-clamp-2"
+            class="text-xs mt-2 truncate"
           >
             <font-awesome
               :icon="record.recipientProjectName ? 'users' : 'user'"