From d31576a4d51916b675afb1f414985ff00acee2ed Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Tue, 25 Feb 2025 18:59:30 +0100
Subject: [PATCH] Racepicks: Make vertical race name font smaller on small
 screens

---
 src/lib/components/cards/RaceResultCard.svelte | 2 +-
 src/routes/racepicks/+page.svelte              | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/cards/RaceResultCard.svelte b/src/lib/components/cards/RaceResultCard.svelte
index 10f30e6..c887c49 100644
--- a/src/lib/components/cards/RaceResultCard.svelte
+++ b/src/lib/components/cards/RaceResultCard.svelte
@@ -47,7 +47,7 @@
 
   // Reactive state
   let required: boolean = $derived(!result);
-  let disabled: boolean = $derived(!data.admin);
+  let disabled: boolean = $derived(!data.admin); // TODO: Datelock (prevent entering future result)
   let race_select_value: string = $state(result?.race ?? "");
 
   let currentrace: Race | undefined = $derived(
diff --git a/src/routes/racepicks/+page.svelte b/src/routes/racepicks/+page.svelte
index 79be1f8..4373c29 100644
--- a/src/routes/racepicks/+page.svelte
+++ b/src/routes/racepicks/+page.svelte
@@ -254,10 +254,12 @@
       {#each raceresults as result}
         {@const race = get_by_value(races, "id", result.race)}
 
+        <!-- Race name display -->
         <div
           use:popup={race_popupsettings(race?.id ?? "Invalid")}
           class="card mt-2 flex h-20 w-7 cursor-pointer flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36"
         >
+          <!-- For large screens -->
           <span class="hidden text-sm font-bold lg:block">
             {race?.step}: {race?.name}
           </span>
@@ -266,8 +268,9 @@
           </span>
           <span class="hidden text-sm lg:block">Guessed: P{race?.pxx}</span>
 
-          <span class="block rotate-90 text-sm font-bold lg:hidden">
-            {race?.name.slice(0, 8)}{(race?.name.length ?? 8) > 8 ? "." : ""}
+          <!-- For small screens -->
+          <span class="block rotate-90 text-xs font-bold lg:hidden">
+            {race?.name.slice(0, 9)}{(race?.name.length ?? 9) > 9 ? "." : ""}
           </span>
         </div>