Converted to tabular structure

For more adaptive widths

src/views/ContactAmountsView.vue

@@ -6,66 +6,73 @@
     </h1>
 
     <!-- Results List -->
-    <div>
+    <table
-      <div class="border-b border-slate-300 flex">
+      class="table-auto w-full border-t border-slate-300 text-sm sm:text-base text-center"
-        <div class="w-1/4"></div>
+    >
-        <div class="w-1/4">from them</div>
+      <thead class="bg-slate-100">
-        <div class="w-1/4"></div>
+        <tr class="border-b border-slate-300">
-        <div class="w-1/4">to them</div>
+          <th></th>
-      </div>
+          <th class="px-1 py-2">From Them</th>
-      <div
+          <th></th>
-        class="border-b border-slate-300 flex"
+          <th class="px-1 py-2">To Them</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
           v-for="record in giveRecords"
           :key="record.id"
+          class="border-b border-slate-300"
         >
-        <div class="w-1/4">
+          <td class="p-1 text-xs sm:text-sm text-slate-500">
             {{ new Date(record.issuedAt).toLocaleString() }}
-        </div>
+          </td>
-        <div class="w-1/4">
+          <td class="p-1">
             <span v-if="record.agentDid == contact.did">
               <div class="font-bold">
                 {{ record.amount }} {{ record.unit }}
-              <span v-if="record.amountConfirmed" class="tooltip">
+                <span v-if="record.amountConfirmed" title="Confirmed">
-                <fa icon="circle-check" class="text-green-600 fa-fw ml-1" />
+                  <fa icon="circle-check" class="text-green-600 fa-fw" />
-                <span class="tooltiptext">Confirmed</span>
                 </span>
-              <button v-else class="tooltip" @click="confirm(record)">
+                <button v-else @click="confirm(record)" title="Unconfirmed">
-                <fa icon="circle" class="text-blue-600 fa-fw ml-1" />
+                  <fa icon="circle" class="text-blue-600 fa-fw" />
-                <span class="tooltiptext">Unconfirmed</span>
                 </button>
               </div>
-            <br />
+              <div class="italic text-xs sm:text-sm text-slate-500">
                 {{ record.description }}
-          </span>
               </div>
-        <div class="w-1/8">
+            </span>
+          </td>
+          <td class="p-1">
             <span v-if="record.agentDid == contact.did">
-            <fa icon="long-arrow-alt-left" class="text-slate-900 fa-fw ml-1" />
+              <fa icon="long-arrow-alt-left" class="text-slate-400 fa-fw" />
             </span>
             <span v-else>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              <fa icon="long-arrow-alt-right" class="text-slate-400 fa-fw" />
-            <fa icon="long-arrow-alt-right" class="text-slate-900 fa-fw ml-1" />
             </span>
-        </div>
+          </td>
-        <div class="w-1/4">
+          <td class="p-1">
             <span v-if="record.agentDid != contact.did">
               <div class="font-bold">
                 {{ record.amount }} {{ record.unit }}
-              <span v-if="record.amountConfirmed" class="tooltip">
+                <span v-if="record.amountConfirmed" title="Confirmed">
-                <fa icon="circle-check" class="text-green-600 fa-fw ml-1" />
+                  <fa icon="circle-check" class="text-green-600 fa-fw" />
-                <span class="tooltiptext">Confirmed</span>
                 </span>
-              <button v-else class="tooltip" @click="cannotConfirmMessage()">
+                <button
-                <fa icon="circle" class="text-slate-600 fa-fw ml-1" />
+                  v-else
-                <span class="tooltiptext">Unconfirmed</span>
+                  @click="cannotConfirmMessage()"
+                  title="Unconfirmed"
+                >
+                  <fa icon="circle" class="text-slate-600 fa-fw" />
                 </button>
               </div>
-            <br />
+              <div class="italic text-xs sm:text-sm text-slate-500">
                 {{ record.description }}
-          </span>
-        </div>
-      </div>
               </div>
+            </span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
     <AlertMessage
       :alertTitle="alertTitle"
       :alertMessage="alertMessage"