Make the interface bigger

src/routes/private/+layout.svelte

@@ -17,7 +17,7 @@
 </script>
 
 <nav class="border-b border-gray-300 bg-gray-50 p-2 text-gray-900">
-	<div class="container mx-auto max-w-2xl p-2">
+	<div class="container mx-auto max-w-4xl p-2">
 		<div class="flex items-center justify-between">
 			<a href="/private/home" class="text-lg font-bold" aria-label="ScanWave Home">ScanWave</a>
 
@@ -32,7 +32,7 @@
 </nav>
 
 
-<div class="container mx-auto max-w-2xl bg-white p-2">
+<div class="container mx-auto max-w-4xl bg-white p-2">
 	<QueryClientProvider client={queryClient}>
 		{@render children()}
 	</QueryClientProvider>

src/routes/private/events/+page.svelte

@@ -57,7 +57,7 @@
 	{$debouncedSearch ? `Search Results: "${$debouncedSearch}"` : 'All Events'}
 </h1>
 
-<div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto mb-10">
+<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4 mx-auto mb-10">
 	{#if isLoading}
 		<!-- Loading placeholders -->
 		{#each Array(4) as _}