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>
-        v-for="record in giveRecords"
+        </tr>
-        :key="record.id"
+      </thead>
-      >
+      <tbody>
-        <div class="w-1/4">
+        <tr
-          {{ new Date(record.issuedAt).toLocaleString() }}
+          v-for="record in giveRecords"
-        </div>
+          :key="record.id"
-        <div class="w-1/4">
+          class="border-b border-slate-300"
-          <span v-if="record.agentDid == contact.did">
+        >
-            <div class="font-bold">
+          <td class="p-1 text-xs sm:text-sm text-slate-500">
-              {{ record.amount }} {{ record.unit }}
+            {{ new Date(record.issuedAt).toLocaleString() }}
-              <span v-if="record.amountConfirmed" class="tooltip">
+          </td>
-                <fa icon="circle-check" class="text-green-600 fa-fw ml-1" />
+          <td class="p-1">
-                <span class="tooltiptext">Confirmed</span>
+            <span v-if="record.agentDid == contact.did">
-              </span>
+              <div class="font-bold">
-              <button v-else class="tooltip" @click="confirm(record)">
+                {{ record.amount }} {{ record.unit }}
-                <fa icon="circle" class="text-blue-600 fa-fw ml-1" />
+                <span v-if="record.amountConfirmed" title="Confirmed">
-                <span class="tooltiptext">Unconfirmed</span>
+                  <fa icon="circle-check" class="text-green-600 fa-fw" />
-              </button>
+                </span>
-            </div>
+                <button v-else @click="confirm(record)" title="Unconfirmed">
-            <br />
+                  <fa icon="circle" class="text-blue-600 fa-fw" />
-            {{ record.description }}
+                </button>
-          </span>
+              </div>
-        </div>
+              <div class="italic text-xs sm:text-sm text-slate-500">
-        <div class="w-1/8">
+                {{ record.description }}
-          <span v-if="record.agentDid == contact.did">
+              </div>
-            <fa icon="long-arrow-alt-left" class="text-slate-900 fa-fw ml-1" />
+            </span>
-          </span>
+          </td>
-          <span v-else>
+          <td class="p-1">
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <span v-if="record.agentDid == contact.did">
-            <fa icon="long-arrow-alt-right" class="text-slate-900 fa-fw ml-1" />
+              <fa icon="long-arrow-alt-left" class="text-slate-400 fa-fw" />
-          </span>
+            </span>
-        </div>
+            <span v-else>
-        <div class="w-1/4">
+              <fa icon="long-arrow-alt-right" class="text-slate-400 fa-fw" />
-          <span v-if="record.agentDid != contact.did">
+            </span>
-            <div class="font-bold">
+          </td>
-              {{ record.amount }} {{ record.unit }}
+          <td class="p-1">
-              <span v-if="record.amountConfirmed" class="tooltip">
+            <span v-if="record.agentDid != contact.did">
-                <fa icon="circle-check" class="text-green-600 fa-fw ml-1" />
+              <div class="font-bold">
-                <span class="tooltiptext">Confirmed</span>
+                {{ record.amount }} {{ record.unit }}
-              </span>
+                <span v-if="record.amountConfirmed" title="Confirmed">
-              <button v-else class="tooltip" @click="cannotConfirmMessage()">
+                  <fa icon="circle-check" class="text-green-600 fa-fw" />
-                <fa icon="circle" class="text-slate-600 fa-fw ml-1" />
+                </span>
-                <span class="tooltiptext">Unconfirmed</span>
+                <button
-              </button>
+                  v-else
-            </div>
+                  @click="cannotConfirmMessage()"
-            <br />
+                  title="Unconfirmed"
-            {{ record.description }}
+                >
-          </span>
+                  <fa icon="circle" class="text-slate-600 fa-fw" />
-        </div>
+                </button>
-      </div>
+              </div>
-    </div>
+              <div class="italic text-xs sm:text-sm text-slate-500">
+                {{ record.description }}
+              </div>
+            </span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
     <AlertMessage
       :alertTitle="alertTitle"
       :alertMessage="alertMessage"