Show STATUS/TIME columns on all screen sizes with responsive font sizing and adjusted column widths
Some checks failed
CI / tests (push) Has been cancelled
CI / deploy-staging (push) Has been cancelled
CI / deploy-production (push) Has been cancelled

This commit is contained in:
ut-masekela
2026-03-25 09:01:04 +02:00
parent 3533bfc024
commit 52d2af0721

View File

@@ -111,13 +111,13 @@
<div class="flex-1"> <div class="flex-1">
<span class="text-xs sm:text-sm lg:text-base text-white/60 uppercase tracking-wider">DRIVER</span> <span class="text-xs sm:text-sm lg:text-base text-white/60 uppercase tracking-wider">DRIVER</span>
</div> </div>
<!-- STATUS column - hidden on mobile --> <!-- STATUS column -->
<div class="hidden md:block w-20 lg:w-28 text-center"> <div class="w-14 sm:w-20 md:w-24 text-center flex-shrink-0">
<span class="text-sm lg:text-base text-white/60 uppercase tracking-wider">STATUS</span> <span class="text-[10px] sm:text-xs md:text-sm text-white/60 uppercase tracking-wider">STATUS</span>
</div> </div>
<!-- TIME column - hidden on mobile/tablet --> <!-- TIME column -->
<div class="hidden lg:block w-32 text-right"> <div class="w-16 sm:w-20 lg:w-28 text-right flex-shrink-0">
<span class="text-base text-white/60 uppercase tracking-wider">TIME</span> <span class="text-[10px] sm:text-xs md:text-sm text-white/60 uppercase tracking-wider">TIME</span>
</div> </div>
</div> </div>
</div> </div>
@@ -192,25 +192,25 @@
</span> </span>
</div> </div>
<!-- Status - hidden on mobile --> <!-- Status -->
<div class="hidden md:flex w-20 lg:w-28 items-center justify-center flex-shrink-0"> <div class="w-14 sm:w-20 md:w-24 flex items-center justify-center flex-shrink-0">
@if($statusBadge) @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] }} {{ $statusBadge[1] }}
</span> </span>
@else @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 @endif
</div> </div>
<!-- Time - hidden on mobile/tablet --> <!-- Time -->
<div class="hidden lg:block w-32 flex-shrink-0 text-right"> <div class="w-16 sm:w-20 lg:w-28 flex-shrink-0 text-right">
@if($timeDisplay) @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 }} {{ $timeDisplay }}
</span> </span>
@else @else
<span class="text-2xl text-gray-400"></span> <span class="text-[10px] sm:text-xs lg:text-lg text-gray-400"></span>
@endif @endif
</div> </div>