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

Let hero stats cards auto-expand to fit long values.
Deploy Ladill Hosting / deploy (push) Successful in 46s
Details

Browse Source 
Replace fixed mobile widths and equal grid columns with content-sized cards so figures like GHS balances and storage sizes are never clipped.
This commit is contained in:
isaacclad
2026-07-24 14:53:17 +00:00
parent f266b8e738
commit b92484c852
2 changed files with 10 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+8 -2
View File
@@ -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/hosting/page-hero.blade.php
+2 -10
View File
@@ -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>