Seasonpicks: Decrease table margins

src/routes/racepicks/+page.svelte

@@ -256,7 +256,7 @@
       {#await data.currentpickedusers then currentpicked}
         {#each currentpicked as user}
           <div
-            class="card ml-1 mt-2 w-full min-w-14 rounded-b-none py-2 lg:ml-2
+            class="card ml-1 mt-2 w-full min-w-14 rounded-b-none py-2
             {$pbUser && $pbUser.username === user.username ? 'bg-primary-300' : ''}"
           >
             <!-- Avatar + name display at the top -->
@@ -293,7 +293,7 @@
 
           <div
             use:popup={race_popupsettings(race?.id ?? "Invalid")}
-            class="card mt-1 flex h-20 w-7 cursor-pointer flex-col !rounded-r-none lg:mt-2 lg:w-36 lg:p-2"
+            class="card mt-1 flex h-20 w-7 cursor-pointer flex-col !rounded-r-none lg:w-36 lg:p-2"
           >
             <!-- For large screens -->
             <span class="hidden text-sm font-bold lg:block">
@@ -351,7 +351,7 @@
         {#each currentpicked as user}
           {@const picks = racepicks.filter((pick: RacePick) => pick.user === user.id)}
 
-          <div class="ml-1 w-full min-w-14 lg:ml-2">
+          <div class="ml-1 w-full min-w-14">
             {#each raceresults as result}
               {@const race = get_by_value(races, "id", result.race)}
               {@const pick = picks.filter((pick: RacePick) => pick.race === race?.id)[0]}
@@ -360,7 +360,7 @@
                 result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0 ? PXX_COLORS[3] : PXX_COLORS[-1]}
 
               {#if pick}
-                <div class="mt-1 h-20 w-full border bg-surface-300 px-1 py-2 lg:mt-2 lg:px-2">
+                <div class="mt-1 h-20 w-full border bg-surface-300 px-1 py-2 lg:px-2">
                   <div class="mx-auto flex h-full w-fit flex-col justify-evenly">
                     <span
                       class="w-10 p-1 text-center text-xs rounded-container-token lg:text-sm"
@@ -377,7 +377,7 @@
                   </div>
                 </div>
               {:else}
-                <div class="mt-1 h-20 w-full px-1 py-2 lg:mt-2 lg:px-2"></div>
+                <div class="mt-1 h-20 w-full px-1 py-2 lg:px-2"></div>
               {/if}
             {/each}
           </div>

src/routes/seasonpicks/+page.svelte

@@ -264,7 +264,7 @@
       {#await data.seasonpickedusers then seasonpicked}
         {#each seasonpicked as user}
           <div
-            class="card ml-1 mt-2 w-full min-w-36 rounded-b-none py-2 lg:ml-2
+            class="card ml-1 mt-2 w-full min-w-36 rounded-b-none py-2
             {$pbUser && $pbUser.username === user.username ? 'bg-primary-300' : ''}"
           >
             <!-- Avatar + name display at the top -->
@@ -296,7 +296,7 @@
       class="sticky left-0 z-10 w-7 min-w-7 max-w-7 bg-surface-50 lg:w-36 lg:min-w-36 lg:max-w-36"
     >
       <!-- Hottake -->
-      <div class="card mt-1 flex h-32 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36">
+      <div class="card mt-1 flex h-32 w-7 flex-col !rounded-r-none p-2 lg:w-36">
         <span class="hidden text-nowrap text-sm font-bold lg:block">Hottake</span>
         <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Hottake</span>
       </div>
@@ -304,13 +304,13 @@
       {#await data.seasonpicks then seasonpicks}
         {#if seasonpicks.length > 0}
           <!-- Drivers Champion -->
-          <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36">
+          <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:w-36">
             <span class="hidden text-nowrap text-sm font-bold lg:block">Drivers<br />Champion</span>
             <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">WDC</span>
           </div>
 
           <!-- Constructors Champion -->
-          <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36">
+          <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:w-36">
             <span class="hidden text-nowrap text-sm font-bold lg:block">
               Constructors<br />Champion
             </span>
@@ -318,25 +318,25 @@
           </div>
 
           <!-- Overtakes -->
-          <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36">
+          <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:w-36">
             <span class="hidden text-nowrap text-sm font-bold lg:block">Most Overtakes</span>
             <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Overtakes</span>
           </div>
 
           <!-- DNFs -->
-          <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36">
+          <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:w-36">
             <span class="hidden text-nowrap text-sm font-bold lg:block">Most DNFs</span>
             <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">DNFs</span>
           </div>
 
           <!-- Doohan Starts -->
-          <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36">
+          <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:w-36">
             <span class="hidden text-nowrap text-sm font-bold lg:block">Doohan Starts</span>
             <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Doohan</span>
           </div>
 
           <!-- Teamwinners -->
-          <div class="card mt-1 flex h-64 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36">
+          <div class="card mt-1 flex h-64 w-7 flex-col !rounded-r-none p-2 lg:w-36">
             <span class="hidden text-nowrap text-sm font-bold lg:block"
               >Team-Battle<br />Winners</span
             >
@@ -344,7 +344,7 @@
           </div>
 
           <!-- Podiums -->
-          <div class="card mt-1 flex h-64 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36">
+          <div class="card mt-1 flex h-64 w-7 flex-col !rounded-r-none p-2 lg:w-36">
             <span class="hidden text-nowrap text-sm font-bold lg:block">Podiums</span>
             <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Podiums</span>
           </div>
@@ -371,10 +371,10 @@
             .sort((a: Driver, b: Driver) => a.code.localeCompare(b.code))
             .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))}
 
-          <div class="ml-1 w-full min-w-36 lg:ml-2">
+          <div class="ml-1 w-full min-w-36">
             <!-- Hottake -->
             <div
-              class="mt-1 h-32 w-full overflow-y-scroll border bg-surface-300 px-1 py-2 leading-3 lg:mt-2 lg:px-2"
+              class="mt-1 h-32 w-full overflow-y-scroll border bg-surface-300 px-1 py-2 leading-3 lg:px-2"
             >
               <div class="mx-auto w-fit text-xs font-bold lg:text-sm">
                 {hottake?.hottake ?? "?"}
@@ -383,9 +383,7 @@
 
             {#if seasonpicks.length > 0}
               <!-- Drivers Champion -->
-              <div
-                class="mt-1 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:mt-2 lg:px-2"
-              >
+              <div class="mt-1 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
                 <div class="mx-auto w-fit">
                   <!-- NOTE: The containerstyle should be 64x64, don't know why that doesn't fit... (also below) -->
                   <LazyImage
@@ -400,9 +398,7 @@
               </div>
 
               <!-- Constructors Champion -->
-              <div
-                class="mt-1 h-20 w-full border bg-surface-300 p-1 px-1 py-2 leading-3 lg:mt-2 lg:px-2"
-              >
+              <div class="mt-1 h-20 w-full border bg-surface-300 p-1 px-1 py-2 leading-3 lg:px-2">
                 <div class="mx-auto w-fit">
                   <LazyImage
                     src={wccwinner?.banner_url ?? get_team_banner_template(data.graphics)}
@@ -416,9 +412,7 @@
               </div>
 
               <!-- Most Overtakes -->
-              <div
-                class="mt-1 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:mt-2 lg:px-2"
-              >
+              <div class="mt-1 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
                 <div class="mx-auto w-fit">
                   <LazyImage
                     src={mostovertakes?.headshot_url ?? get_driver_headshot_template(data.graphics)}
@@ -434,9 +428,7 @@
               </div>
 
               <!-- Most DNFs -->
-              <div
-                class="mt-1 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:mt-2 lg:px-2"
-              >
+              <div class="mt-1 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
                 <div class="mx-auto w-fit">
                   <LazyImage
                     src={mostdnfs?.headshot_url ?? get_driver_headshot_template(data.graphics)}
@@ -450,9 +442,7 @@
               </div>
 
               <!-- Doohan Starts -->
-              <div
-                class="mt-1 h-20 w-full border bg-surface-300 p-1 px-1 py-2 leading-3 lg:mt-2 lg:px-2"
-              >
+              <div class="mt-1 h-20 w-full border bg-surface-300 p-1 px-1 py-2 leading-3 lg:px-2">
                 <div class="mx-auto w-fit text-xs lg:text-sm">
                   Jack Doohan startet <span class="font-bold">{pick?.doohanstarts ?? "?"}</span> mal.
                 </div>
@@ -460,7 +450,7 @@
 
               <!-- Teamwinners -->
               <div
-                class="mt-1 h-64 w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 lg:mt-2 lg:px-2"
+                class="mt-1 h-64 w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 lg:px-2"
               >
                 {#if pick && pick.teamwinners}
                   <div class="grid grid-cols-2 gap-1">
@@ -489,7 +479,7 @@
               <!-- Podiums -->
               <!-- TODO: Replace all style tags throughout the page with custom classes like height here -->
               <div
-                class="mt-1 h-64 w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 shadow lg:mt-2 lg:px-2"
+                class="mt-1 h-64 w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 shadow lg:px-2"
               >
                 {#if pick && pick.podiums}
                   <div class="grid grid-cols-2 gap-1">