improved table

.gitignore

@@ -1 +1,3 @@
-.venv
+.venv
+__pycache__
+*.pyc

frontend/src/assets/main.css

@@ -34,3 +34,7 @@ main {
 .boxed {
   @apply space-y-2 bg-blue-200 p-4 rounded-2xl shadow-lg;
 }
+
+table td {
+  @apply p-1;
+}

frontend/src/views/User.vue

@@ -38,28 +38,32 @@ const onNewUserCreation = async () => {
       <template v-if="primaryUser.currentUser.value.role === 'admin'">
         <div class="boxed">
           <h3>Users</h3>
-          <table>
+          <table class="table-auto">
-            <tr>
+            <thead>
-              <th class="font-bold">Username</th>
+              <tr>
-              <th class="font-bold">Role</th>
+                <th class="font-bold">Username</th>
-              <th class="font-bold">Actions</th>
+                <th class="font-bold">Role</th>
-            </tr>
+                <th class="font-bold">Actions</th>
-            <tr v-for="user in primaryUser.allUsers.value" :key="user.user">
+              </tr>
-              <td>{{ user.user }}</td>
+            </thead>
-              <td>{{ user.role }}</td>
+            <tbody>
-              <td>
+              <tr v-for="user in primaryUser.allUsers.value" :key="user.user">
-                <button
+                <td>{{ user.user }}</td>
-                  @click="
+                <td>{{ user.role }}</td>
-                    () =>
+                <td>
-                      deleteUser(user)
+                  <button
-                        .then(() => (userDeletionMsg = { message: 'Success', type: 'success' }))
+                    @click="
-                        .catch((e) => (userDeletionMsg = { message: e, type: 'error' }))
+                      () =>
-                  "
+                        deleteUser(user)
-                >
+                          .then(() => (userDeletionMsg = { message: 'Success', type: 'success' }))
-                  Delete
+                          .catch((e) => (userDeletionMsg = { message: e, type: 'error' }))
-                </button>
+                    "
-              </td>
+                  >
-            </tr>
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            </tbody>
           </table>
           <UserInfo :type="userDeletionMsg.type as any" v-if="userDeletionMsg.message">
             <template #default>