From ba5dac81fd4762f5e19a8eabd3f3f086ca5a9bca Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Mon, 17 Feb 2025 23:32:18 +0100
Subject: [PATCH] Racepicks: Fix picked users grid padding inconsistency

---
 src/routes/racepicks/+page.svelte | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/routes/racepicks/+page.svelte b/src/routes/racepicks/+page.svelte
index 792c62e..4070a67 100644
--- a/src/routes/racepicks/+page.svelte
+++ b/src/routes/racepicks/+page.svelte
@@ -170,7 +170,7 @@
                 <h1 class="text-nowrap font-bold">
                   Picked ({picked.length}/{currentpicked.length}):
                 </h1>
-                <div class="mt-1 grid grid-cols-4 gap-x-2 gap-y-0.5">
+                <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
                   {#each picked.slice(0, 16) as user}
                     <LazyImage
                       src={user.avatar_url ?? get_driver_headshot_template(graphics)}
@@ -303,14 +303,15 @@
     {/await}
   </div>
 
-  <div class="hide-scrollbar flex w-full overflow-x-scroll pb-2">
+  <!-- TODO: Horizontal scrollbar missing in desktop chrome (fuck chrome)??? -->
+  <div class="flex w-full overflow-x-scroll pb-2">
     <!-- Not ideal but currentpickedusers contains all users, so we do not need to fetch the users separately -->
     {#await Promise.all( [data.currentpickedusers, data.racepicks, data.races, data.drivers, data.raceresults], ) then [currentpicked, racepicks, races, drivers, raceresults]}
       {#each currentpicked as user}
         {@const picks = racepicks.filter((pick: RacePick) => pick.user === user.id)}
 
         <div
-          class="card ml-1 mt-2 w-full min-w-12 overflow-hidden py-2 shadow lg:ml-2 {data.user &&
+          class="card ml-1 mt-2 w-full min-w-12 overflow-hidden py-2 shadow lg:ml-2 lg:min-w-40 {data.user &&
           data.user.username === user.username
             ? 'bg-primary-300'
             : ''}"