From 3533bfc024d8e1d44410833c36252b14ecbdeb4c Mon Sep 17 00:00:00 2001
From: ut-masekela <umasekela@gmail.com>
Date: Wed, 25 Mar 2026 08:51:32 +0200
Subject: [PATCH] Adjust leaderboard responsive spacing and hide STATUS/TIME
 columns on smaller screens

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

diff --git a/src/resources/views/leaderboard.blade.php b/src/resources/views/leaderboard.blade.php
index 5541c45..fe21b46 100644
--- a/src/resources/views/leaderboard.blade.php
+++ b/src/resources/views/leaderboard.blade.php
@@ -101,30 +101,30 @@
 
     <!-- Column Header -->
     <div class="bg-[#111111] border-b border-gray-800">
-        <div class="w-full px-3 sm:px-4 lg:px-6 flex items-center h-8 sm:h-9 lg:h-10">
+        <div class="w-full px-2 sm:px-4 lg:px-6 flex items-center h-8 sm:h-9 lg:h-10">
             <!-- POS column -->
-            <div class="w-14 sm:w-16 lg:w-20 flex-shrink-0 flex items-center justify-center">
+            <div class="w-12 sm:w-14 lg:w-20 flex-shrink-0 flex items-center justify-center">
                 <span class="text-xs sm:text-sm lg:text-base text-white/60 uppercase tracking-wider">POS</span>
             </div>
             <!-- DRIVER column -->
-            <div class="flex-1 flex items-center px-4 lg:px-6">
+            <div class="flex-1 flex items-center px-2 sm:px-4 lg:px-6">
                 <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 -->
-                <div class="w-20 sm:w-24 lg:w-28 text-center">
-                    <span class="text-xs sm:text-sm lg:text-base text-white/60 uppercase tracking-wider">STATUS</span>
+                <!-- 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>
                 </div>
-                <!-- TIME column -->
-                <div class="w-24 sm:w-28 lg:w-36 text-right">
-                    <span class="text-xs sm:text-sm lg:text-base text-white/60 uppercase tracking-wider">TIME</span>
+                <!-- 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>
                 </div>
             </div>
         </div>
     </div>
 
     <!-- Leaderboard -->
-    <main class="w-full px-3 sm:px-4 lg:px-6 py-3 lg:py-4">
+    <main class="w-full px-2 sm:px-4 lg:px-6 py-2 sm:py-3 lg:py-4">
         
         @if($participants->isEmpty())
             <div class="text-center py-20 lg:py-32">
@@ -168,32 +168,32 @@
                         };
                     @endphp
                     
-                    <div class="row-shadow flex items-stretch h-14 sm:h-16 lg:h-20">
+                    <div class="row-shadow flex items-stretch h-12 sm:h-14 lg:h-18">
                         
                         <!-- Position Cube -->
-                        <div class="{{ $posClass }} w-14 sm:w-16 lg:w-20 flex-shrink-0 flex items-center justify-center">
-                            <span class="tabular text-2xl sm:text-3xl lg:text-4xl text-white drop-shadow-md">
+                        <div class="{{ $posClass }} w-12 sm:w-14 lg:w-20 flex-shrink-0 flex items-center justify-center">
+                            <span class="tabular text-xl sm:text-2xl lg:text-4xl text-white drop-shadow-md">
                                 {{ $position }}
                             </span>
                         </div>
                         
                         <!-- Main Bar (Light) -->
-                        <div class="bar-light flex-1 flex items-center px-4 lg:px-6">
+                        <div class="bar-light flex-1 flex items-center px-2 sm:px-4 lg:px-6 overflow-hidden">
                             
                             <!-- Driver (Number + Name) -->
-                            <div class="flex-1 min-w-0 flex items-center gap-2 lg:gap-4">
+                            <div class="flex-1 min-w-0 flex items-center gap-1.5 sm:gap-2 lg:gap-4">
                                 @if($participant->number)
-                                    <span class="tabular text-sm sm:text-base lg:text-xl text-gray-500">
+                                    <span class="tabular text-xs sm:text-sm lg:text-xl text-gray-500 flex-shrink-0">
                                         #{{ $participant->number }}
                                     </span>
                                 @endif
-                                <span class="text-lg sm:text-xl lg:text-3xl text-gray-900 uppercase tracking-wide truncate">
+                                <span class="text-sm sm:text-lg lg:text-2xl text-gray-900 uppercase tracking-wide truncate">
                                     {{ $participant->name }}
                                 </span>
                             </div>
                             
-                            <!-- Status -->
-                            <div class="w-20 sm:w-24 lg:w-28 flex items-center justify-center flex-shrink-0">
+                            <!-- Status - hidden on mobile -->
+                            <div class="hidden md:flex w-20 lg:w-28 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">
                                         {{ $statusBadge[1] }}
@@ -203,14 +203,14 @@
                                 @endif
                             </div>
                             
-                            <!-- Time -->
-                            <div class="w-24 sm:w-28 lg:w-36 flex-shrink-0 text-right">
+                            <!-- Time - hidden on mobile/tablet -->
+                            <div class="hidden lg:block w-32 flex-shrink-0 text-right">
                                 @if($timeDisplay)
-                                    <span class="tabular text-lg sm:text-xl lg:text-3xl text-gray-900">
+                                    <span class="tabular text-2xl text-gray-900">
                                         {{ $timeDisplay }}
                                     </span>
                                 @else
-                                    <span class="text-lg sm:text-xl lg:text-3xl text-gray-400">—</span>
+                                    <span class="text-2xl text-gray-400">—</span>
                                 @endif
                             </div>