From 3254a74ccf7b8505752d0da258e6fe84f187faca Mon Sep 17 00:00:00 2001
From: rai <96561881+r4ai@users.noreply.github.com>
Date: Sat, 24 May 2025 16:04:43 +0900
Subject: [PATCH 1/3] feat: add an option to show driver's last name instaed of
 tla

---
 dash/src/app/dashboard/settings/page.tsx | 5 +++++
 dash/src/components/driver/Driver.tsx    | 9 ++++++++-
 dash/src/stores/useSettingsStore.ts      | 6 ++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/dash/src/app/dashboard/settings/page.tsx b/dash/src/app/dashboard/settings/page.tsx
index 42ca4111..7645019f 100644
--- a/dash/src/app/dashboard/settings/page.tsx
+++ b/dash/src/app/dashboard/settings/page.tsx
@@ -47,6 +47,11 @@ export default function SettingsPage() {
 				<p className="text-zinc-500">Show Drivers Mini Sectors</p>
 			</div>
 
+			<div className="flex gap-2">
+				<Toggle enabled={settings.showDriverLastName} setEnabled={(v) => settings.setShowDriverLastName(v)} />
+				<p className="text-zinc-500">Show Drivers Last Name</p>
+			</div>
+
 			<h2 className="my-4 text-2xl">Race Control</h2>
 
 			<div className="flex gap-2">
diff --git a/dash/src/components/driver/Driver.tsx b/dash/src/components/driver/Driver.tsx
index 03ad3b9e..94e9aede 100644
--- a/dash/src/components/driver/Driver.tsx
+++ b/dash/src/components/driver/Driver.tsx
@@ -53,6 +53,8 @@ export default function Driver({ driver, timingDriver, position }: Props) {
 
 	const favoriteDriver = useSettingsStore((state) => state.favoriteDrivers.includes(driver.racingNumber));
 
+	const showDriverLastName = useSettingsStore((state) => state.showDriverLastName);
+
 	return (
 		<motion.div
 			layout="position"
@@ -71,7 +73,12 @@ export default function Driver({ driver, timingDriver, position }: Props) {
 						: "5.5rem 3.5rem 5.5rem 4rem 5rem 5.5rem auto",
 				}}
 			>
-				<DriverTag className="min-w-full!" short={driver.tla} teamColor={driver.teamColour} position={position} />
+				<DriverTag
+					className="min-w-full!"
+					short={showDriverLastName ? driver.lastName : driver.tla}
+					teamColor={driver.teamColour}
+					position={position}
+				/>
 				<DriverDRS
 					on={carData ? hasDRS(carData[45]) : false}
 					possible={carData ? possibleDRS(carData[45]) : false}
diff --git a/dash/src/stores/useSettingsStore.ts b/dash/src/stores/useSettingsStore.ts
index 4cdec0a8..1527e3b4 100644
--- a/dash/src/stores/useSettingsStore.ts
+++ b/dash/src/stores/useSettingsStore.ts
@@ -25,6 +25,9 @@ type SettingsStore = {
 	showMiniSectors: boolean;
 	setShowMiniSectors: (showMiniSectors: boolean) => void;
 
+	showDriverLastName: boolean;
+	setShowDriverLastName: (showDriverLastName: boolean) => void;
+
 	favoriteDrivers: string[];
 	setFavoriteDrivers: (favoriteDrivers: string[]) => void;
 	removeFavoriteDriver: (driver: string) => void;
@@ -64,6 +67,9 @@ export const useSettingsStore = create<SettingsStore>()(
 				showMiniSectors: true,
 				setShowMiniSectors: (showMiniSectors: boolean) => set({ showMiniSectors }),
 
+				showDriverLastName: false,
+				setShowDriverLastName: (showDriverLastName: boolean) => set({ showDriverLastName: showDriverLastName }),
+
 				favoriteDrivers: [],
 				setFavoriteDrivers: (favoriteDrivers: string[]) => set({ favoriteDrivers }),
 				removeFavoriteDriver: (driver: string) =>

From fcba9955e8379ab6ef7bd47d50398f0ec684b1a0 Mon Sep 17 00:00:00 2001
From: rai <96561881+r4ai@users.noreply.github.com>
Date: Sat, 24 May 2025 16:28:29 +0900
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20adjust=20DriverTag=20length=20to=20f?=
 =?UTF-8?q?it=20the=20driver=E2=80=99s=20name?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dash/src/components/dashboard/LeaderBoard.tsx | 23 +++++++++++--------
 dash/src/components/driver/Driver.tsx         | 13 +++--------
 dash/src/components/driver/DriverTag.tsx      |  7 +++---
 3 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/dash/src/components/dashboard/LeaderBoard.tsx b/dash/src/components/dashboard/LeaderBoard.tsx
index 69f05be9..7347edad 100644
--- a/dash/src/components/dashboard/LeaderBoard.tsx
+++ b/dash/src/components/dashboard/LeaderBoard.tsx
@@ -14,8 +14,18 @@ export default function LeaderBoard() {
 
 	const showTableHeader = useSettingsStore((state) => state.tableHeaders);
 
+	const carMetrics = useSettingsStore((state) => state.carMetrics);
+
 	return (
-		<div className="flex w-fit flex-col gap-0.5">
+		<div
+			className="grid w-fit gap-0.5"
+			style={{
+				gridTemplateColumns: carMetrics
+					? "max-content max-content 3.5rem 5.5rem 4rem 5rem 5.5rem auto 10.5rem"
+					: "max-content max-content 3.5rem 5.5rem 4rem 5rem 5.5rem auto",
+				gridTemplateRows: "auto",
+			}}
+		>
 			{showTableHeader && <TableHeaders />}
 
 			{(!drivers || !driversTiming) &&
@@ -45,15 +55,8 @@ const TableHeaders = () => {
 	const carMetrics = useSettingsStore((state) => state.carMetrics);
 
 	return (
-		<div
-			className="grid items-center gap-2 p-1 px-2 text-sm font-medium text-zinc-500"
-			style={{
-				gridTemplateColumns: carMetrics
-					? "5.5rem 3.5rem 5.5rem 4rem 5rem 5.5rem auto 10.5rem"
-					: "5.5rem 3.5rem 5.5rem 4rem 5rem 5.5rem auto",
-			}}
-		>
-			<p>Position</p>
+		<div className="col-span-full grid grid-cols-subgrid gap-2 p-1 px-2 text-sm font-medium text-zinc-500">
+			<p className="col-span-2">Position</p>
 			<p>DRS</p>
 			<p>Tire</p>
 			<p>Info</p>
diff --git a/dash/src/components/driver/Driver.tsx b/dash/src/components/driver/Driver.tsx
index 94e9aede..803a8f51 100644
--- a/dash/src/components/driver/Driver.tsx
+++ b/dash/src/components/driver/Driver.tsx
@@ -58,23 +58,16 @@ export default function Driver({ driver, timingDriver, position }: Props) {
 	return (
 		<motion.div
 			layout="position"
-			className={clsx("flex flex-col gap-1 rounded-lg p-1.5 select-none", {
+			className={clsx("col-span-full grid grid-cols-subgrid gap-1 rounded-lg p-1.5 select-none", {
 				"opacity-50": timingDriver.knockedOut || timingDriver.retired || timingDriver.stopped,
 				"bg-sky-800/30": favoriteDriver,
 				"bg-violet-800/30": hasFastest,
 				"bg-red-800/30": sessionPart != undefined && inDangerZone(position, sessionPart),
 			})}
 		>
-			<div
-				className="grid items-center gap-2"
-				style={{
-					gridTemplateColumns: carMetrics
-						? "5.5rem 3.5rem 5.5rem 4rem 5rem 5.5rem auto 10.5rem"
-						: "5.5rem 3.5rem 5.5rem 4rem 5rem 5.5rem auto",
-				}}
-			>
+			<div className="col-span-full grid grid-cols-subgrid items-center gap-2">
 				<DriverTag
-					className="min-w-full!"
+					className="col-span-2 min-w-full! grid-cols-subgrid"
 					short={showDriverLastName ? driver.lastName : driver.tla}
 					teamColor={driver.teamColour}
 					position={position}
diff --git a/dash/src/components/driver/DriverTag.tsx b/dash/src/components/driver/DriverTag.tsx
index a3ab206f..18e357c2 100644
--- a/dash/src/components/driver/DriverTag.tsx
+++ b/dash/src/components/driver/DriverTag.tsx
@@ -12,14 +12,15 @@ export default function DriverTag({ position, teamColor, short, className }: Pro
 		<div
 			id="walkthrough-driver-position"
 			className={clsx(
-				"flex w-fit items-center justify-between gap-0.5 rounded-lg bg-zinc-500 px-1 py-1 font-black",
+				"grid w-fit items-center justify-between gap-0.5 rounded-lg bg-zinc-500 px-1 py-1 font-black",
+				{ "grid-cols-2": short && position },
 				className,
 			)}
 			style={{ backgroundColor: `#${teamColor}` }}
 		>
-			{position && <p className="px-1 text-xl leading-none">{position}</p>}
+			{position && <p className={clsx("px-1 text-xl leading-none", { "mr-1.5": short })}>{position}</p>}
 
-			<div className="flex h-min w-min items-center justify-center rounded-md bg-white px-1">
+			<div className="flex h-min w-full items-center justify-start rounded-md bg-white px-1">
 				<p className="font-mono text-zinc-500" style={{ ...(teamColor && { color: `#${teamColor}` }) }}>
 					{short}
 				</p>

From 5687e2c42ecde9665b0ac10e342cc351193ed9a4 Mon Sep 17 00:00:00 2001
From: rai <96561881+r4ai@users.noreply.github.com>
Date: Thu, 29 May 2025 00:39:27 +0900
Subject: [PATCH 3/3] fix: fix broken layout in SkeletonDriver

---
 dash/src/components/dashboard/LeaderBoard.tsx | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/dash/src/components/dashboard/LeaderBoard.tsx b/dash/src/components/dashboard/LeaderBoard.tsx
index 7347edad..cade3d60 100644
--- a/dash/src/components/dashboard/LeaderBoard.tsx
+++ b/dash/src/components/dashboard/LeaderBoard.tsx
@@ -74,15 +74,8 @@ const SkeletonDriver = () => {
 	const animateClass = "h-8 animate-pulse rounded-md bg-zinc-800";
 
 	return (
-		<div
-			className="grid items-center gap-2 p-1.5"
-			style={{
-				gridTemplateColumns: carMetrics
-					? "5.5rem 3.5rem 5.5rem 4rem 5rem 5.5rem auto 10.5rem"
-					: "5.5rem 3.5rem 5.5rem 4rem 5rem 5.5rem auto",
-			}}
-		>
-			<div className={animateClass} style={{ width: "100%" }} />
+		<div className="col-span-full grid grid-cols-subgrid items-center gap-2 p-1.5">
+			<div className={clsx(animateClass, "col-span-2 min-w-[5.5rem]")} style={{ width: "100%" }} />
 
 			<div className={animateClass} style={{ width: "100%" }} />
 
@@ -107,7 +100,7 @@ const SkeletonDriver = () => {
 				<div className={clsx(animateClass, "h-4!")} />
 			</div>
 
-			<div className="flex w-full gap-1">
+			<div className="flex w-full min-w-72 gap-1">
 				{new Array(3).fill(null).map((_, index) => (
 					<div className="flex w-full flex-col gap-1" key={`skeleton.sector.${index}`}>
 						<div className={clsx(animateClass, "h-4!")} />