From 8ada6eb03310d38346f40a6f2749375050adc784 Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Fri, 24 Jul 2026 14:52:56 +0000
Subject: [PATCH] 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                               | 10 ++++++++--
 resources/views/components/care/page-hero.blade.php |  8 ++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 7accbdc..95e41f4 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -101,7 +101,10 @@ html.qr-mobile-page body {
 }
 
 .mobile-stats-card {
-    width: calc(66.666667% - 0.5rem);
+    width: max-content;
+    min-width: 9rem;
+    max-width: none;
+    box-sizing: border-box;
 }
 
 @layer components {
@@ -334,7 +337,10 @@ html.qr-mobile-page body {
 
 @media (min-width: 640px) {
     .mobile-stats-card {
-        width: auto;
+        width: max-content;
+        min-width: 9rem;
+        max-width: none;
+        flex: 1 1 auto;
     }
 }
 
diff --git a/resources/views/components/care/page-hero.blade.php b/resources/views/components/care/page-hero.blade.php
index e9e46b8..506d388 100644
--- a/resources/views/components/care/page-hero.blade.php
+++ b/resources/views/components/care/page-hero.blade.php
@@ -25,11 +25,11 @@
             </div>
 
             @if (count($stats) > 0)
-                <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:grid sm:grid-cols-3 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 flex w-[8.5rem] shrink-0 snap-start flex-col justify-center rounded-xl border border-slate-200 bg-white/90 px-3 py-3 text-center backdrop-blur-sm sm:w-auto sm:min-w-0">
-                            <p class="truncate text-lg font-bold tabular-nums text-slate-900 sm:text-xl" title="{{ $stat['value'] }}">{{ $stat['value'] }}</p>
-                            <p class="mt-0.5 truncate text-[11px] font-medium text-slate-500" title="{{ $stat['label'] }}">{{ $stat['label'] }}</p>
+                        <div class="mobile-stats-card flex w-max min-w-[9rem] shrink-0 snap-start flex-col justify-center rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                            <p class="whitespace-nowrap text-lg font-bold tabular-nums text-slate-900 sm:text-xl" title="{{ $stat['value'] }}">{{ $stat['value'] }}</p>
+                            <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500" title="{{ $stat['label'] }}">{{ $stat['label'] }}</p>
                         </div>
                     @endforeach
                 </div>