Let hero stats cards auto-expand to fit long values.

Replace fixed mobile widths and equal grid columns with content-sized cards so figures like GHS balances and storage sizes are never clipped.

resources/css/app.css

@@ -70,12 +70,18 @@
 }
 
 .mobile-stats-card {
-    width: calc(66.666667% - 0.5rem);
+    width: max-content;
+    min-width: 9rem;
+    max-width: none;
+    box-sizing: border-box;
 }
 
 @media (min-width: 640px) {
     .mobile-stats-card {
-        width: auto;
+        width: max-content;
+        min-width: 9rem;
+        max-width: none;
+        flex: 1 1 auto;
     }
 }
 

resources/views/components/servers/page-hero.blade.php

@@ -5,14 +5,6 @@
     'stats' => [],
 ])
 
-@php
-    $statCols = match (count($stats)) {
-        4 => 'sm:grid-cols-2 lg:grid-cols-4',
-        2 => 'sm:grid-cols-2',
-        default => 'sm:grid-cols-3',
-    };
-@endphp
-
 <div {{ $attributes->merge(['class' => 'relative overflow-hidden rounded-2xl border border-slate-200 bg-white']) }}>
     <div class="absolute inset-0 bg-gradient-to-br from-indigo-50/80 via-white to-violet-50/60"></div>
     <div class="relative px-6 py-8 sm:px-10">
@@ -33,9 +25,9 @@
             </div>
 
             @if (count($stats) > 0)
-                <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:grid {{ $statCols }} sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
+                <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:flex sm:flex-wrap sm:justify-end sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
                     @foreach ($stats as $stat)
-                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                        <div class="mobile-stats-card w-max min-w-[9rem] shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
                             <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ $stat['value'] }}</p>
                             <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">{{ $stat['label'] }}</p>
                         </div>