From 6fd31efb30dcad97f9c043a25d22694f738249ef Mon Sep 17 00:00:00 2001
From: Sam Chau <schau22@pm.me>
Date: Thu, 29 Jan 2026 01:30:34 +1030
Subject: [PATCH] style(logs): use responsive styling for logs page

---
 src/routes/settings/logs/+page.svelte | 45 +++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/routes/settings/logs/+page.svelte b/src/routes/settings/logs/+page.svelte
index 93d84bd..86fdc31 100644
--- a/src/routes/settings/logs/+page.svelte
+++ b/src/routes/settings/logs/+page.svelte
@@ -207,8 +207,8 @@
 <div class="p-8">
 	<!-- Header -->
 	<div class="mb-8">
-		<h1 class="text-3xl font-bold text-neutral-900 dark:text-neutral-50">Logs</h1>
-		<p class="mt-3 text-lg text-neutral-600 dark:text-neutral-400">
+		<h1 class="text-2xl font-bold text-neutral-900 md:text-3xl dark:text-neutral-50">Logs</h1>
+		<p class="mt-3 text-base text-neutral-600 md:text-lg dark:text-neutral-400">
 			Application logs with filtering and search
 		</p>
 	</div>
@@ -230,9 +230,41 @@
 	/>
 
 	<!-- Stats and Pagination Controls (Top) -->
-	<div class="mt-6 mb-4 grid grid-cols-3 items-center">
+	<!-- Mobile layout -->
+	<div class="mt-6 mb-4 flex items-center justify-between gap-2 md:hidden">
+		<!-- Stats -->
+		<div class="text-xs text-neutral-600 dark:text-neutral-400">
+			Showing {startIndex + 1}-{endIndex} of {filteredLogs.length}
+		</div>
+
+		<!-- Page navigation -->
+		<div class="flex items-center gap-1">
+			<button
+				type="button"
+				on:click={goToPreviousPage}
+				disabled={currentPage <= 1}
+				class="flex h-6 w-6 items-center justify-center rounded border border-neutral-300 bg-white text-neutral-700 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700"
+			>
+				<ChevronLeft size={14} />
+			</button>
+			<span class="min-w-[50px] text-center text-xs text-neutral-600 dark:text-neutral-400">
+				{currentPage}/{totalPages}
+			</span>
+			<button
+				type="button"
+				on:click={goToNextPage}
+				disabled={currentPage >= totalPages}
+				class="flex h-6 w-6 items-center justify-center rounded border border-neutral-300 bg-white text-neutral-700 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700"
+			>
+				<ChevronRight size={14} />
+			</button>
+		</div>
+	</div>
+
+	<!-- Desktop layout -->
+	<div class="mt-6 mb-4 hidden md:grid md:grid-cols-3 md:items-center">
 		<!-- Stats (Left) -->
-		<div class="font-mono text-sm text-neutral-600 dark:text-neutral-400">
+		<div class="text-sm text-neutral-600 dark:text-neutral-400">
 			Showing {startIndex + 1}-{endIndex} of {filteredLogs.length} logs
 			{#if filteredLogs.length !== data.logs.length}
 				(filtered from {data.logs.length})
@@ -287,6 +319,7 @@
 		emptyMessage="No logs found"
 		hoverable={true}
 		compact={true}
+		responsive
 		initialSort={{ key: 'timestamp', direction: 'desc' }}
 	>
 		<svelte:fragment slot="actions" let:row>
@@ -299,8 +332,8 @@
 		</svelte:fragment>
 	</Table>
 
-	<!-- Pagination Controls (Bottom) -->
-	<div class="mt-4 flex items-center justify-center gap-2">
+	<!-- Pagination Controls (Bottom) - hidden on mobile since we have top controls -->
+	<div class="mt-4 hidden items-center justify-center gap-2 md:flex">
 		<button
 			type="button"
 			on:click={goToPreviousPage}