From ba25f5e6c8c1c8c8a81612323c8b5a9acf055d5e Mon Sep 17 00:00:00 2001 From: hobokenchicken Date: Tue, 21 Jul 2026 18:14:24 +0000 Subject: [PATCH] style: optimize stat-card grid to fit on 1 line for desktop screens or 2 lines for laptops --- static/css/dashboard.css | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/static/css/dashboard.css b/static/css/dashboard.css index 40aedbdd..d88517d0 100644 --- a/static/css/dashboard.css +++ b/static/css/dashboard.css @@ -752,21 +752,34 @@ body { /* Stat Cards */ .stats-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - gap: 1.5rem; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: 1rem; margin-bottom: 1.5rem; } +@media (min-width: 1400px) { + .stats-grid { + grid-template-columns: repeat(7, 1fr); + } +} + +@media (min-width: 900px) and (max-width: 1399px) { + .stats-grid { + grid-template-columns: repeat(4, 1fr); + } +} + .stat-card { background: var(--bg1); - padding: var(--spacing-lg); + padding: 1rem 1.1rem; border-radius: var(--border-radius); border: 1px solid var(--bg2); box-shadow: var(--shadow-sm); display: flex; - gap: 1.25rem; + gap: 0.85rem; align-items: center; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + min-width: 0; } .stat-card:hover {