From 7706cb96c41ebd5455a609f0c4bef1994739cda2 Mon Sep 17 00:00:00 2001
From: Elias Renman <elias.renman@gmail.com>
Date: Tue, 25 Mar 2025 12:44:07 +0100
Subject: [PATCH] feat: margins

---
 web/src/App.svelte             |  2 +-
 web/src/pages/Home/Home.svelte | 58 ++++++++++++++++++----------------
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index bcac3e9..ed4d7ed 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <QueryClientProvider client={queryClient}>
-  <main class="p-4">
+  <main>
     {#if cookies.includes("access_token")}
       <Home />
     {:else}
diff --git a/web/src/pages/Home/Home.svelte b/web/src/pages/Home/Home.svelte
index 5c0d647..3e827a4 100644
--- a/web/src/pages/Home/Home.svelte
+++ b/web/src/pages/Home/Home.svelte
@@ -6,35 +6,37 @@
   const urls = queryUrls();
 </script>
 
-<Navbar />
+<div class="p-4">
+  <Navbar />
 
-<div class="max-w-3xl mx-auto p-4">
-  <h1 class="text-2xl font-bold mb-4">URL Shortener</h1>
+  <div class="max-w-3xl mx-auto m-4">
+    <h1 class="text-2xl font-bold mb-4">URL Shortener</h1>
 
-  <!-- Table -->
-  <div class="bg-gray-800 text-white rounded-lg shadow-lg overflow-hidden">
-    {#if $urls.isLoading}
-      <p>Loading...</p>
-    {:else if $urls.isError}
-      <p>Error: {$urls.error.message}</p>
-    {:else if $urls.isSuccess}
-      <table class="w-full text-left">
-        <thead class="bg-gray-900">
-          <tr>
-            <th class="p-3">Shortform</th>
-            <th class="p-3">Destination</th>
-            <th class="p-3">Expires at</th>
-            <th class="p-3">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {#each $urls.data.data as row}
-            <Row {row} />
-          {/each}
-        </tbody>
-      </table>
-    {/if}
+    <!-- Table -->
+    <div class="bg-gray-800 text-white rounded-lg shadow-lg overflow-hidden">
+      {#if $urls.isLoading}
+        <p>Loading...</p>
+      {:else if $urls.isError}
+        <p>Error: {$urls.error.message}</p>
+      {:else if $urls.isSuccess}
+        <table class="w-full text-left">
+          <thead class="bg-gray-900">
+            <tr>
+              <th class="p-3">Shortform</th>
+              <th class="p-3">Destination</th>
+              <th class="p-3">Expires at</th>
+              <th class="p-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each $urls.data.data as row}
+              <Row {row} />
+            {/each}
+          </tbody>
+        </table>
+      {/if}
+    </div>
+
+    <Create />
   </div>
-
-  <Create />
 </div>