From b18c5c42bf14f4e8284f89aaad328a66c6314448 Mon Sep 17 00:00:00 2001
From: weeb <weeb@lolispace.moe>
Date: Fri, 30 May 2025 14:07:44 +0200
Subject: [PATCH] Improve table responsiveness

---
 .../views/livewire/application-list.blade.php | 103 +++++++++---------
 1 file changed, 53 insertions(+), 50 deletions(-)

diff --git a/resources/views/livewire/application-list.blade.php b/resources/views/livewire/application-list.blade.php
index b5921f3..858c72b 100644
--- a/resources/views/livewire/application-list.blade.php
+++ b/resources/views/livewire/application-list.blade.php
@@ -1,5 +1,5 @@
 <div wire:poll.10s="refresh">
-    <div class="max-w-5xl mx-auto p-6">
+    <div class="max-w-5xl mx-auto p-6 ">
         <h1 class="text-2xl font-bold mb-4">Application Management</h1>
 
         <div class="mb-4">
@@ -16,58 +16,61 @@
             </flux:callout>
         @endif
 
-        <table class="w-full border-collapse border border-gray-300 dark:border-neutral-950 rounded-lg">
-            <thead class="bg-gray-100 dark:bg-neutral-900">
-                <tr>
-                    <th class="px-4 py-2 text-left">UUID</th>
-                    <th class="px-4 py-2">Status</th>
-                    <th class="px-4 py-2">Uploads</th>
-                    <th class="px-4 py-2">Submitted</th>
-                    <th class="px-4 py-2">Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                @forelse ($applications as $app)
+        <div class="bg-white dark:bg-zinc-900 shadow-md rounded-lg overflow-hidden">
+            <table class="min-w-full text-sm text-left text-zinc-700 dark:text-zinc-300">
+                <thead class="bg-zinc-100 dark:bg-zinc-950 text-xs uppercase text-zinc-500 dark:text-zinc-400">
                     <tr>
-                        <td class="px-4 py-2 font-mono text-sm">{{ $app->uuid }}</td>
-                        <td class="px-4 py-2">
-                            @if ($app->status === 0)
-                                <span class="text-yellow-600 font-semibold">Pending</span>
-                            @elseif ($app->status === 1)
-                                <span class="text-green-600 font-semibold">Approved</span>
-                            @elseif ($app->status === 2)
-                                <span class="text-red-600 font-semibold">Denied</span>
-                            @endif
-                        </td>
-                        <td class="px-4 py-2 text-center">{{ $app->uploads->count() }}</td>
-                        <td class="px-4 py-2 text-sm">{{ $app->created_at->diffForHumans() }}</td>
-                        <td class="px-4 py-2">
-                            <flux:button size="sm" variant="primary"
-                                href="{{ route('application', ['uuid' => $app->uuid]) }}">
-                                View
-                            </flux:button>
-
-                            @if ($app->status === 0)
-                                <flux:button class="cursor-pointer" size="sm"
-                                    wire:click="approveApplication('{{ (string) $app->uuid }}')">
-                                    Approve
-                                </flux:button>
-                                <flux:button class="cursor-pointer" size="sm" variant="danger"
-                                    wire:click="rejectApplication('{{ (string) $app->uuid }}')">
-                                    Reject
-                                </flux:button>
-                            @endif
-
-                        </td>
+                        <th class="px-4 py-2 text-left hidden md:block">UUID</th>
+                        <th class="px-4 py-2">Status</th>
+                        <th class="px-4 py-2">Uploads</th>
+                        <th class="px-4 py-2">Submitted</th>
+                        <th class="px-4 py-2">Actions</th>
                     </tr>
-                @empty
-                    <tr>
-                        <td colspan="5" class="text-center py-4 text-gray-500">No applications found.</td>
-                    </tr>
-                @endforelse
-            </tbody>
-        </table>
+                </thead>
+                <tbody>
+                    @forelse ($applications as $app)
+                        <tr class="border-b dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-950">
+                            <td class="px-4 py-4 font-mono text-sm hidden md:block align-middle">{{ $app->uuid }}
+                            </td>
+                            <td class="px-4 py-2">
+                                @if ($app->status === 0)
+                                    <span class="text-yellow-600 font-semibold">Pending</span>
+                                @elseif ($app->status === 1)
+                                    <span class="text-green-600 font-semibold">Approved</span>
+                                @elseif ($app->status === 2)
+                                    <span class="text-red-600 font-semibold">Denied</span>
+                                @endif
+                            </td>
+                            <td class="px-4 py-2 text-center">{{ $app->uploads->count() }}</td>
+                            <td class="px-4 py-2 text-sm">{{ $app->created_at->diffForHumans() }}</td>
+                            <td class="px-4 py-2">
+                                <div class="flex flex-col xl:flex-row">
+                                    <flux:button size="sm" variant="primary"
+                                        href="{{ route('application', ['uuid' => $app->uuid]) }}">
+                                        View
+                                    </flux:button>
 
+                                    @if ($app->status === 0)
+                                        <flux:button class="cursor-pointer" size="sm"
+                                            wire:click="approveApplication('{{ (string) $app->uuid }}')">
+                                            Approve
+                                        </flux:button>
+                                        <flux:button class="cursor-pointer" size="sm" variant="danger"
+                                            wire:click="rejectApplication('{{ (string) $app->uuid }}')">
+                                            Reject
+                                        </flux:button>
+                                    @endif
+                                </div>
+                            </td>
+                        </tr>
+                    @empty
+                        <tr>
+                            <td colspan="5" class="text-center py-4 text-gray-500">No applications found.</td>
+                        </tr>
+                    @endforelse
+                </tbody>
+            </table>
+        </div>
         <div class="mt-4">
             {{ $applications->links() }}
         </div>