isaacclad/ladill-qr-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

QR: stop balance stat card overflowing on small screens
Deploy Ladill QR Plus / deploy (push) Successful in 52s
Details

Browse Source 
The header stats used sm:grid-cols-3 (equal thirds), so the nowrap GHS
balance overflowed its card on narrower >=640px devices and for larger
amounts. Use a content-sized flex row (cards already width:auto) so each
card grows to fit and wraps when space is tight.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
isaacclad
2026-06-17 20:58:57 +00:00
co-authored by Claude Opus 4.8
parent f3563c7d3e
commit deb8888157
1 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/qr-codes/index.blade.php
+1 -1
View File
@@ -38,7 +38,7 @@
</div> </div>
</div> </div>
<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-wrap sm:justify-end sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
<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 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">GHS {{ number_format($wallet->spendableBalance(), 2) }}</p> <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">GHS {{ number_format($wallet->spendableBalance(), 2) }}</p>
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">QR balance</p> <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">QR balance</p>