Seasonpicks: Fix accordion shadow (other shadows still missing)

src/lib/dropdown.ts

@@ -30,7 +30,7 @@ export const team_dropdown_options = (teams: Team[]): DropdownOption[] =>
  */
 export const driver_dropdown_options = (drivers: Driver[]): DropdownOption[] =>
   drivers
-    .sort((a: Driver, b: Driver) => a.firstname.localeCompare(b.firstname))
+    .sort((a: Driver, b: Driver) => a.lastname.localeCompare(b.lastname))
     .map((driver: Driver) => {
       return {
         label: `${driver.firstname} ${driver.lastname}`,

src/routes/+layout.svelte

@@ -99,7 +99,7 @@
   const drawer_settings_base: DrawerSettings = {
     position: "top",
     height: "auto",
-    padding: "lg:px-96 pt-14", // pt-14 is 56px, so its missing 4px for the 60px navbar...
+    padding: "2xl:px-96 pt-14", // pt-14 is 56px, so its missing 4px for the 60px navbar...
     bgDrawer: "bg-surface-100",
     duration: 150,
   };

src/routes/racepicks/+page.svelte

@@ -304,7 +304,7 @@
         {@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 lg:min-w-40
+          class="card ml-1 mt-2 w-full min-w-12 overflow-hidden py-2 shadow lg:ml-2 lg:min-w-36
           {$pbUser && $pbUser.username === user.username ? 'bg-primary-300' : ''}"
         >
           <!-- Avatar + name display at the top -->
@@ -321,7 +321,6 @@
               style="height: 40px; line-height: 40px;"
               class="ml-2 hidden text-nowrap text-center align-middle lg:block"
             >
-              <!-- TODO: Setting to toggle between username or firstname display -->
               {user.firstname}
             </div>
           </div>

src/routes/seasonpicks/+page.svelte

@@ -76,7 +76,12 @@
           .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
       : undefined}
 
-    <Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-2" width="w-full">
+    <!-- HACK: relative was required to get the shadow to show up above the upper table occluder? -->
+    <Accordion
+      class="card relative z-20 mx-auto bg-surface-500 shadow"
+      regionPanel="pt-2"
+      width="w-full"
+    >
       <AccordionItem>
         <svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
         <svelte:fragment slot="summary">
@@ -85,13 +90,13 @@
         <svelte:fragment slot="content">
           <div class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit lg:grid-cols-5 2xl:grid-cols-10">
             <!-- Hottake -->
-            <div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
+            <div class="card w-full min-w-40 p-2 lg:max-w-40">
               <h1 class="mb-2 text-nowrap font-bold">Hottake:</h1>
               <span class="text-sm">{data.seasonpick?.hottake}</span>
             </div>
 
             <!-- Doohanstarts -->
-            <div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
+            <div class="card w-full min-w-40 p-2 lg:max-w-40">
               <h1 class="mb-2 text-nowrap font-bold">Doohan Starts:</h1>
               {#if data.seasonpick}
                 <span class="text-sm">
@@ -101,7 +106,7 @@
             </div>
 
             <!-- WDC -->
-            <div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
+            <div class="card w-full min-w-40 p-2 pb-0 lg:max-w-40">
               <h1 class="mb-2 text-nowrap font-bold">WDC:</h1>
               <LazyImage
                 src={get_by_value(drivers, "id", data.seasonpick?.wdcwinner ?? "")?.headshot_url ??
@@ -116,7 +121,7 @@
             </div>
 
             <!-- WDC -->
-            <div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
+            <div class="card w-full min-w-40 p-2 pb-0 lg:max-w-40">
               <h1 class="mb-2 text-nowrap font-bold">WCC:</h1>
               <LazyImage
                 src={get_by_value(teams, "id", data.seasonpick?.wccwinner ?? "")?.banner_url ??
@@ -131,7 +136,7 @@
             </div>
 
             <!-- Overtakes -->
-            <div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
+            <div class="card w-full min-w-40 p-2 pb-0 lg:max-w-40">
               <h1 class="mb-2 text-nowrap font-bold">Most Overtakes:</h1>
               <LazyImage
                 src={get_by_value(drivers, "id", data.seasonpick?.mostovertakes ?? "")
@@ -146,7 +151,7 @@
             </div>
 
             <!-- DNFs -->
-            <div class="card w-full min-w-40 p-2 pb-0 shadow lg:max-w-40">
+            <div class="card w-full min-w-40 p-2 pb-0 lg:max-w-40">
               <h1 class="mb-2 text-nowrap font-bold">Most DNFs:</h1>
               <LazyImage
                 src={get_by_value(drivers, "id", data.seasonpick?.mostdnfs ?? "")?.headshot_url ??
@@ -161,7 +166,7 @@
             </div>
 
             <!-- Teamwinners -->
-            <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
+            <div class="card max-h-[155px] w-full min-w-40 p-2 lg:max-w-40">
               <h1 class="text-nowrap font-bold">Teamwinners:</h1>
               <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
                 {#if teamwinners}
@@ -180,7 +185,7 @@
             </div>
 
             <!-- Podiums -->
-            <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
+            <div class="card max-h-[155px] w-full min-w-40 p-2 lg:max-w-40">
               <h1 class="text-nowrap font-bold">Podiums:</h1>
               <div class="mt-1 grid max-h-[110px] grid-cols-4 gap-x-0 gap-y-0.5 overflow-y-scroll">
                 {#if podiums}
@@ -199,7 +204,7 @@
             </div>
 
             <!-- Show users that have picked -->
-            <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
+            <div class="card max-h-[155px] w-full min-w-40 p-2 lg:max-w-40">
               <h1 class="text-nowrap font-bold">
                 Picked ({picked.length}/{currentpicked.length}):
               </h1>
@@ -218,7 +223,7 @@
             </div>
 
             <!-- Show users that have not picked yet -->
-            <div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40">
+            <div class="card max-h-[155px] w-full min-w-40 p-2 lg:max-w-40">
               <h1 class="text-nowrap font-bold">
                 Missing ({outstanding.length}/{currentpicked.length}):
               </h1>
@@ -242,258 +247,282 @@
   {/await}
 {/if}
 
-<!-- The fookin table -->
+<!-- HACK: Subtract additional ~100px from height because fucking Safari reports the viewport height as if the urlbar was hidden. Original size should be calc(100vh-116px). -->
-<div class="{!$pbUser ? 'mt-[-8px]' : ''} flex">
+<div
-  <div>
+  class="{!$pbUser
+    ? 'mt-[-8px]'
+    : ''} relative h-[calc(100vh-200px)] w-[calc(100vw-16px)] scroll-pl-8 scroll-pt-[72px] flex-col overflow-scroll max-lg:hide-scrollbar lg:h-[calc(100vh-116px)] lg:scroll-pl-[152px]"
+>
+  <div class="sticky top-0 z-[15] flex w-full min-w-fit">
     <!-- TODO: Points popup? -->
-    <div class="mt-4 h-10 w-7 lg:w-36"></div>
+    <div
+      class="sticky left-0 z-20 h-16 w-7 min-w-7 max-w-7 rounded-br-none bg-surface-50 lg:w-36 lg:min-w-36 lg:max-w-36"
+    ></div>
 
-    <!-- Hottake -->
+    <!-- Avatars -->
-    <div class="card mt-2 flex h-32 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36">
+    <div class="flex h-16 w-full bg-surface-50">
-      <span class="hidden text-nowrap text-sm font-bold lg:block">Hottake</span>
+      {#await data.seasonpickedusers then seasonpicked}
-      <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Hottake</span>
+        {#each seasonpicked as user}
-    </div>
+          <div
-
+            class="card ml-1 mt-2 w-full min-w-36 rounded-b-none py-2 lg:ml-2
-    {#await data.seasonpicks then seasonpicks}
+            {$pbUser && $pbUser.username === user.username ? 'bg-primary-300' : ''}"
-      {#if seasonpicks.length > 0}
-        <!-- Drivers Champion -->
-        <div
-          class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow 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-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36"
-        >
-          <span class="hidden text-nowrap text-sm font-bold lg:block">
-            Constructors<br />Champion
-          </span>
-          <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">WCC</span>
-        </div>
-
-        <!-- Overtakes -->
-        <div
-          class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow 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-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow 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-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow 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-2 flex h-64 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36"
-        >
-          <span class="hidden text-nowrap text-sm font-bold lg:block">Team-Battle<br />Winners</span
           >
-          <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Teamwinners</span>
+            <!-- Avatar + name display at the top -->
-        </div>
+            <div class="m-auto flex h-10 w-fit">
-
+              <LazyImage
-        <!-- Podiums -->
+                src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
-        <div
+                imgwidth={AVATAR_WIDTH}
-          class="card mt-2 flex h-64 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36"
+                imgheight={AVATAR_HEIGHT}
-        >
+                containerstyle="height: 40px; width: 40px;"
-          <span class="hidden text-nowrap text-sm font-bold lg:block">Podiums</span>
+                imgclass="bg-surface-400 rounded-full"
-          <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Podiums</span>
+                tooltip={user.firstname}
-        </div>
+              />
-      {/if}
+              <div
-    {/await}
+                style="height: 40px; line-height: 40px;"
+                class="ml-2 text-nowrap text-center align-middle"
+              >
+                {user.firstname}
+              </div>
+            </div>
+          </div>
+        {/each}
+      {/await}
+    </div>
   </div>
 
-  <!-- TODO: Add user option to display driver codes instead of headshots (or both) -->
+  <div class="flex w-full min-w-fit">
-  <div class="flex w-full overflow-x-scroll pb-2">
+    <!-- Categories -->
-    {#await Promise.all( [data.seasonpickedusers, data.seasonpicks, data.hottakes, data.drivers, data.teams], ) then [seasonpicked, seasonpicks, hottakes, drivers, teams]}
+    <div
-      {#each seasonpicked as user}
+      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"
-        {@const hottake = hottakes.filter((take: Hottake) => take.user === user.id)[0] ?? undefined}
+    >
-        {@const pick =
+      <!-- Hottake -->
-          seasonpicks.filter((pick: SeasonPick) => pick.user === user.id)[0] ?? undefined}
+      <div class="card mt-1 flex h-32 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36">
-        {@const wdcwinner = pick ? get_by_value(drivers, "id", pick.wdcwinner) : undefined}
+        <span class="hidden text-nowrap text-sm font-bold lg:block">Hottake</span>
-        {@const wccwinner = pick ? get_by_value(teams, "id", pick.wccwinner) : undefined}
+        <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Hottake</span>
-        {@const mostovertakes = pick ? get_by_value(drivers, "id", pick.mostovertakes) : undefined}
+      </div>
-        {@const mostdnfs = pick ? get_by_value(drivers, "id", pick.mostdnfs) : undefined}
-        {@const drivers_sorted = drivers
-          .filter((driver: Driver) => driver.active)
-          .sort((a: Driver, b: Driver) => a.code.localeCompare(b.code))
-          .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))}
 
-        <div
+      {#await data.seasonpicks then seasonpicks}
-          class="card ml-1 mt-2 w-full min-w-36 overflow-hidden py-2 shadow lg:ml-2
+        {#if seasonpicks.length > 0}
-          {$pbUser && $pbUser.username === user.username ? 'bg-primary-300' : ''}"
+          <!-- 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">
-          <!-- Avatar + name display at the top -->
+            <span class="hidden text-nowrap text-sm font-bold lg:block">Drivers<br />Champion</span>
-          <div class="mx-auto flex h-10 w-fit">
+            <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">WDC</span>
-            <LazyImage
-              src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
-              imgwidth={AVATAR_WIDTH}
-              imgheight={AVATAR_HEIGHT}
-              containerstyle="height: 40px; width: 40px;"
-              imgclass="bg-surface-400 rounded-full"
-              tooltip={user.firstname}
-            />
-            <div
-              style="height: 40px; line-height: 40px;"
-              class="ml-2 hidden text-nowrap text-center align-middle lg:block"
-            >
-              <!-- TODO: Setting to toggle between username or firstname display -->
-              {user.firstname}
-            </div>
           </div>
 
-          <!-- Hottake -->
+          <!-- Constructors Champion -->
-          <div
+          <div class="card mt-1 flex h-20 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36">
-            class="mt-2 h-32 w-full overflow-y-scroll border bg-surface-300 px-1 py-2 leading-3 lg:px-2"
+            <span class="hidden text-nowrap text-sm font-bold lg:block">
-          >
+              Constructors<br />Champion
-            <div class="mx-auto w-fit text-xs font-bold lg:text-sm">{hottake?.hottake ?? "?"}</div>
+            </span>
+            <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">WCC</span>
           </div>
 
-          {#if seasonpicks.length > 0}
+          <!-- Overtakes -->
-            <!-- 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="mt-2 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
+            <span class="hidden text-nowrap text-sm font-bold lg:block">Most Overtakes</span>
-              <div class="mx-auto w-fit">
+            <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Overtakes</span>
-                <!-- NOTE: The containerstyle should be 64x64, don't know why that doesn't fit... (also below) -->
+          </div>
-                <LazyImage
-                  src={wdcwinner?.headshot_url ?? get_driver_headshot_template(data.graphics)}
-                  imgwidth={DRIVER_HEADSHOT_HEIGHT}
-                  imgheight={DRIVER_HEADSHOT_WIDTH}
-                  containerstyle="height: 62px;"
-                  imgclass="bg-surface-400 rounded-md"
-                  tooltip={wdcwinner ? `${wdcwinner.firstname} ${wdcwinner.lastname}` : undefined}
-                />
-              </div>
-            </div>
 
-            <!-- Constructors Champion -->
+          <!-- DNFs -->
-            <div class="mt-2 h-20 w-full border bg-surface-300 p-1 px-1 py-2 leading-3 lg:px-2">
+          <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="mx-auto w-fit">
+            <span class="hidden text-nowrap text-sm font-bold lg:block">Most DNFs</span>
-                <LazyImage
+            <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">DNFs</span>
-                  src={wccwinner?.banner_url ?? get_team_banner_template(data.graphics)}
+          </div>
-                  imgwidth={TEAM_BANNER_WIDTH}
-                  imgheight={TEAM_BANNER_HEIGHT}
-                  containerstyle="height: 62px;"
-                  imgclass="bg-surface-400 rounded-md"
-                  tooltip={wccwinner?.name}
-                />
-              </div>
-            </div>
 
-            <!-- Most Overtakes -->
+          <!-- Doohan Starts -->
-            <div class="mt-2 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
+          <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="mx-auto w-fit">
+            <span class="hidden text-nowrap text-sm font-bold lg:block">Doohan Starts</span>
-                <LazyImage
+            <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Doohan</span>
-                  src={mostovertakes?.headshot_url ?? get_driver_headshot_template(data.graphics)}
+          </div>
-                  imgwidth={DRIVER_HEADSHOT_HEIGHT}
-                  imgheight={DRIVER_HEADSHOT_WIDTH}
-                  containerstyle="height: 62px;"
-                  imgclass="bg-surface-400 rounded-md"
-                  tooltip={mostovertakes
-                    ? `${mostovertakes.firstname} ${mostovertakes.lastname}`
-                    : undefined}
-                />
-              </div>
-            </div>
 
-            <!-- Most DNFs -->
+          <!-- Teamwinners -->
-            <div class="mt-2 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
+          <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="mx-auto w-fit">
+            <span class="hidden text-nowrap text-sm font-bold lg:block"
-                <LazyImage
+              >Team-Battle<br />Winners</span
-                  src={mostdnfs?.headshot_url ?? get_driver_headshot_template(data.graphics)}
-                  imgwidth={DRIVER_HEADSHOT_HEIGHT}
-                  imgheight={DRIVER_HEADSHOT_WIDTH}
-                  containerstyle="height: 62px;"
-                  imgclass="bg-surface-400 rounded-md"
-                  tooltip={mostdnfs ? `${mostdnfs.firstname} ${mostdnfs.lastname}` : undefined}
-                />
-              </div>
-            </div>
-
-            <!-- Doohan Starts -->
-            <div class="mt-2 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>
-            </div>
-
-            <!-- Teamwinners -->
-            <div
-              class="mt-2 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}
+            <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Teamwinners</span>
-                <div class="grid grid-cols-2 gap-1">
+          </div>
-                  {#each drivers_sorted as driver}
+
-                    {@const color: string = get_by_value(teams, "id", driver?.team ?? "")?.color ?? ""}
+          <!-- Podiums -->
-                    <div class="mx-auto w-fit text-xs lg:text-sm">
+          <div class="card mt-1 flex h-64 w-7 flex-col !rounded-r-none p-2 lg:mt-2 lg:w-36">
-                      <div
+            <span class="hidden text-nowrap text-sm font-bold lg:block">Podiums</span>
-                        class="flex gap-1"
+            <span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Podiums</span>
-                        style="opacity: {pick.teamwinners.includes(driver.id) ? 1.0 : 0.1};"
+          </div>
-                      >
+        {/if}
-                        <span
+      {/await}
-                          class="badge h-5 w-5"
+    </div>
-                          style="color: {color}; background-color: {color};"
+
-                        >
+    <!-- Picks -->
-                        </span>
+    <div class="flex w-full">
-                        <span class="w-7 align-middle" style="line-height: 20px;">
+      {#await Promise.all( [data.seasonpickedusers, data.seasonpicks, data.hottakes, data.drivers, data.teams], ) then [seasonpicked, seasonpicks, hottakes, drivers, teams]}
-                          {driver?.code}
+        {#each seasonpicked as user}
-                        </span>
+          {@const hottake =
-                      </div>
+            hottakes.filter((take: Hottake) => take.user === user.id)[0] ?? undefined}
-                    </div>
+          {@const pick =
-                  {/each}
+            seasonpicks.filter((pick: SeasonPick) => pick.user === user.id)[0] ?? undefined}
-                </div>
+          {@const wdcwinner = pick ? get_by_value(drivers, "id", pick.wdcwinner) : undefined}
-              {/if}
+          {@const wccwinner = pick ? get_by_value(teams, "id", pick.wccwinner) : undefined}
+          {@const mostovertakes = pick
+            ? get_by_value(drivers, "id", pick.mostovertakes)
+            : undefined}
+          {@const mostdnfs = pick ? get_by_value(drivers, "id", pick.mostdnfs) : undefined}
+          {@const drivers_sorted = drivers
+            .filter((driver: Driver) => driver.active)
+            .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">
+            <!-- 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"
+            >
+              <div class="mx-auto w-fit text-xs font-bold lg:text-sm">
+                {hottake?.hottake ?? "?"}
+              </div>
             </div>
 
-            <!-- Podiums -->
+            {#if seasonpicks.length > 0}
-            <!-- TODO: Replace all style tags throughout the page with custom classes like height here -->
+              <!-- Drivers Champion -->
-            <div
+              <div
-              class="mt-2 h-64 w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 lg:px-2"
+                class="mt-1 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:mt-2 lg:px-2"
-            >
+              >
-              {#if pick && pick.podiums}
+                <div class="mx-auto w-fit">
-                <div class="grid grid-cols-2 gap-1">
+                  <!-- NOTE: The containerstyle should be 64x64, don't know why that doesn't fit... (also below) -->
-                  {#each drivers_sorted as driver}
+                  <LazyImage
-                    {@const color: string = get_by_value(teams, "id", driver?.team ?? "")?.color ?? ""}
+                    src={wdcwinner?.headshot_url ?? get_driver_headshot_template(data.graphics)}
-                    <div class="mx-auto w-fit text-xs lg:text-sm">
+                    imgwidth={DRIVER_HEADSHOT_HEIGHT}
-                      <div
+                    imgheight={DRIVER_HEADSHOT_WIDTH}
-                        class="flex gap-1"
+                    containerstyle="height: 62px;"
-                        style="opacity: {pick.podiums.includes(driver.id) ? 1.0 : 0.1};"
+                    imgclass="bg-surface-400 rounded-md"
-                      >
+                    tooltip={wdcwinner ? `${wdcwinner.firstname} ${wdcwinner.lastname}` : undefined}
-                        <span
+                  />
-                          class="badge h-5 w-5"
-                          style="color: {color}; background-color: {color};"
-                        >
-                        </span>
-                        <span class="w-7 align-middle" style="line-height: 20px;">
-                          {driver?.code}
-                        </span>
-                      </div>
-                    </div>
-                  {/each}
                 </div>
-              {/if}
+              </div>
-            </div>
+
-          {/if}
+              <!-- Constructors Champion -->
-        </div>
+              <div
-      {/each}
+                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"
-    {/await}
+              >
+                <div class="mx-auto w-fit">
+                  <LazyImage
+                    src={wccwinner?.banner_url ?? get_team_banner_template(data.graphics)}
+                    imgwidth={TEAM_BANNER_WIDTH}
+                    imgheight={TEAM_BANNER_HEIGHT}
+                    containerstyle="height: 62px;"
+                    imgclass="bg-surface-400 rounded-md"
+                    tooltip={wccwinner?.name}
+                  />
+                </div>
+              </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="mx-auto w-fit">
+                  <LazyImage
+                    src={mostovertakes?.headshot_url ?? get_driver_headshot_template(data.graphics)}
+                    imgwidth={DRIVER_HEADSHOT_HEIGHT}
+                    imgheight={DRIVER_HEADSHOT_WIDTH}
+                    containerstyle="height: 62px;"
+                    imgclass="bg-surface-400 rounded-md"
+                    tooltip={mostovertakes
+                      ? `${mostovertakes.firstname} ${mostovertakes.lastname}`
+                      : undefined}
+                  />
+                </div>
+              </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="mx-auto w-fit">
+                  <LazyImage
+                    src={mostdnfs?.headshot_url ?? get_driver_headshot_template(data.graphics)}
+                    imgwidth={DRIVER_HEADSHOT_HEIGHT}
+                    imgheight={DRIVER_HEADSHOT_WIDTH}
+                    containerstyle="height: 62px;"
+                    imgclass="bg-surface-400 rounded-md"
+                    tooltip={mostdnfs ? `${mostdnfs.firstname} ${mostdnfs.lastname}` : undefined}
+                  />
+                </div>
+              </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="mx-auto w-fit text-xs lg:text-sm">
+                  Jack Doohan startet <span class="font-bold">{pick?.doohanstarts ?? "?"}</span> mal.
+                </div>
+              </div>
+
+              <!-- 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"
+              >
+                {#if pick && pick.teamwinners}
+                  <div class="grid grid-cols-2 gap-1">
+                    {#each drivers_sorted as driver}
+                      {@const color: string = get_by_value(teams, "id", driver?.team ?? "")?.color ?? ""}
+                      <div class="mx-auto w-fit text-xs lg:text-sm">
+                        <div
+                          class="flex gap-1"
+                          style="opacity: {pick.teamwinners.includes(driver.id) ? 1.0 : 0.1};"
+                        >
+                          <span
+                            class="badge h-5 w-5"
+                            style="color: {color}; background-color: {color};"
+                          >
+                          </span>
+                          <span class="w-7 align-middle" style="line-height: 20px;">
+                            {driver?.code}
+                          </span>
+                        </div>
+                      </div>
+                    {/each}
+                  </div>
+                {/if}
+              </div>
+
+              <!-- 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"
+              >
+                {#if pick && pick.podiums}
+                  <div class="grid grid-cols-2 gap-1">
+                    {#each drivers_sorted as driver}
+                      {@const color: string = get_by_value(teams, "id", driver?.team ?? "")?.color ?? ""}
+                      <div class="mx-auto w-fit text-xs lg:text-sm">
+                        <div
+                          class="flex gap-1"
+                          style="opacity: {pick.podiums.includes(driver.id) ? 1.0 : 0.1};"
+                        >
+                          <span
+                            class="badge h-5 w-5"
+                            style="color: {color}; background-color: {color};"
+                          >
+                          </span>
+                          <span class="w-7 align-middle" style="line-height: 20px;">
+                            {driver?.code}
+                          </span>
+                        </div>
+                      </div>
+                    {/each}
+                  </div>
+                {/if}
+              </div>
+            {/if}
+          </div>
+        {/each}
+      {/await}
+    </div>
   </div>
 </div>
 
+<!-- Season pick lock countdown -->
 {#await Promise.all([data.seasonpicks, data.currentrace]) then [seasonpicks, currentrace]}
   {#if seasonpicks.length <= 0 && currentrace}
     <div class="card mx-auto w-fit p-2 shadow">