tweaked member page sizing

ui/src/pages/memberList.vue

@@ -31,12 +31,15 @@ import { useRouter } from 'vue-router';
 import { Ellipsis } from "lucide-vue-next";
 import Input from "@/components/ui/input/Input.vue";
 import LoaForm from "@/components/loa/loaForm.vue";
+import Spinner from "@/components/ui/spinner/Spinner.vue";
 
 const members = ref<Member[]>([]);
 const router = useRouter();
 
+const loaded = ref(false);
 const fetchMembers = async () => {
     members.value = await getMembers();
+    loaded.value = true;
 };
 
 function viewMember(id) {
@@ -56,15 +59,15 @@ const searchedMembers = computed(() => {
 
     <!-- table menu -->
     <div class="w-4xl mx-auto">
-        <div class="flex flex-row items-center justify-between">
+        <div class="flex flex-row items-center justify-between my-5 mt-7">
             <div class="flex items-center justify-between">
-                <p class="scroll-m-20 text-2xl font-semibold tracking-tight my-5">Member Management</p>
+                <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Member Management</p>
             </div>
             <div class="flex justify-between items-center gap-3 mb-4">
                 <Input v-model="searchVal" placeholder="Search Members..."></Input>
             </div>
         </div>
-        <Table>
+        <Table class="h-10">
             <TableHeader>
                 <TableRow>
                     <TableHead class="w-[100px]">
@@ -75,31 +78,40 @@ const searchedMembers = computed(() => {
                     <TableHead>Status</TableHead>
                 </TableRow>
             </TableHeader>
-            <TableBody>
-                <TableRow v-for="member in searchedMembers" :key="member.member_id">
-                    <TableCell class="font-medium">
-                        {{ member.member_name }}
-                    </TableCell>
-                    <TableCell>{{ member.rank }}</TableCell>
-                    <TableCell>{{ member.unit }}</TableCell>
-                    <TableCell>{{ member.status }}</TableCell>
-                    <TableCell>
-                        <Badge v-if="member.loa_until">On LOA</Badge>
-                    </TableCell>
-                    <TableCell @click.stop="" class="text-right">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger class="cursor-pointer">
-                                <Ellipsis></Ellipsis>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent>
-                                <!-- <DropdownMenuItem>Change Rank</DropdownMenuItem>
-                                <DropdownMenuItem>Transfer</DropdownMenuItem> -->
-                                <DropdownMenuItem :variant="'destructive'">Discharge</DropdownMenuItem>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </TableCell>
-                </TableRow>
-            </TableBody>
         </Table>
+
+        <div class="max-h-[60vh] overflow-y-auto scrollbar-themed">
+            <Table v-if="loaded">
+                <TableBody>
+                    <TableRow v-for="member in searchedMembers" :key="member.member_id">
+                        <TableCell class="font-medium">
+                            {{ member.member_name }}
+                        </TableCell>
+                        <TableCell>{{ member.rank }}</TableCell>
+                        <TableCell>{{ member.unit }}</TableCell>
+                        <TableCell>{{ member.status }}</TableCell>
+                        <TableCell>
+                            <Badge v-if="member.loa_until">On LOA</Badge>
+                        </TableCell>
+                        <TableCell @click.stop="" class="text-right">
+                            <DropdownMenu>
+                                <DropdownMenuTrigger class="cursor-pointer">
+                                    <Ellipsis></Ellipsis>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent>
+                                    <!-- <DropdownMenuItem>Change Rank</DropdownMenuItem>
+                                        <DropdownMenuItem>Transfer</DropdownMenuItem> -->
+                                    <DropdownMenuItem :variant="'destructive'">Discharge</DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        </TableCell>
+                    </TableRow>
+                </TableBody>
+            </Table>
+            <div v-else class="flex justify-center my-[30vh]">
+                <Spinner class="size-10"></Spinner>
+            </div>
+        </div>
+
     </div>
 </template>