From 52d2af072182bacfa6bf2170e514aeaf5322c362 Mon Sep 17 00:00:00 2001
From: ut-masekela <umasekela@gmail.com>
Date: Wed, 25 Mar 2026 09:01:04 +0200
Subject: [PATCH] Show STATUS/TIME columns on all screen sizes with responsive
 font sizing and adjusted column widths

---
 src/resources/views/leaderboard.blade.php | 28 +++++++++++------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/resources/views/leaderboard.blade.php b/src/resources/views/leaderboard.blade.php
index fe21b46..adc98a3 100644
--- a/src/resources/views/leaderboard.blade.php
+++ b/src/resources/views/leaderboard.blade.php
@@ -111,13 +111,13 @@
                 <div class="flex-1">
                     <span class="text-xs sm:text-sm lg:text-base text-white/60 uppercase tracking-wider">DRIVER</span>
                 </div>
-                <!-- STATUS column - hidden on mobile -->
-                <div class="hidden md:block w-20 lg:w-28 text-center">
-                    <span class="text-sm lg:text-base text-white/60 uppercase tracking-wider">STATUS</span>
+                <!-- STATUS column -->
+                <div class="w-14 sm:w-20 md:w-24 text-center flex-shrink-0">
+                    <span class="text-[10px] sm:text-xs md:text-sm text-white/60 uppercase tracking-wider">STATUS</span>
                 </div>
-                <!-- TIME column - hidden on mobile/tablet -->
-                <div class="hidden lg:block w-32 text-right">
-                    <span class="text-base text-white/60 uppercase tracking-wider">TIME</span>
+                <!-- TIME column -->
+                <div class="w-16 sm:w-20 lg:w-28 text-right flex-shrink-0">
+                    <span class="text-[10px] sm:text-xs md:text-sm text-white/60 uppercase tracking-wider">TIME</span>
                 </div>
             </div>
         </div>
@@ -192,25 +192,25 @@
                                 </span>
                             </div>
                             
-                            <!-- Status - hidden on mobile -->
-                            <div class="hidden md:flex w-20 lg:w-28 items-center justify-center flex-shrink-0">
+                            <!-- Status -->
+                            <div class="w-14 sm:w-20 md:w-24 flex items-center justify-center flex-shrink-0">
                                 @if($statusBadge)
-                                    <span class="px-2 py-0.5 lg:px-2.5 lg:py-1 {{ $statusBadge[0] }} text-xs lg:text-sm rounded">
+                                    <span class="px-1 py-0.5 sm:px-2 {{ $statusBadge[0] }} text-[8px] sm:text-[10px] md:text-xs rounded">
                                         {{ $statusBadge[1] }}
                                     </span>
                                 @else
-                                    <span class="text-xs lg:text-sm text-gray-400">READY</span>
+                                    <span class="text-[8px] sm:text-[10px] md:text-xs text-gray-400">READY</span>
                                 @endif
                             </div>
                             
-                            <!-- Time - hidden on mobile/tablet -->
-                            <div class="hidden lg:block w-32 flex-shrink-0 text-right">
+                            <!-- Time -->
+                            <div class="w-16 sm:w-20 lg:w-28 flex-shrink-0 text-right">
                                 @if($timeDisplay)
-                                    <span class="tabular text-2xl text-gray-900">
+                                    <span class="tabular text-[10px] sm:text-xs lg:text-lg text-gray-900">
                                         {{ $timeDisplay }}
                                     </span>
                                 @else
-                                    <span class="text-2xl text-gray-400">—</span>
+                                    <span class="text-[10px] sm:text-xs lg:text-lg text-gray-400">—</span>
                                 @endif
                             </div>