From 78bf4f4e427d72187826dc97f15fa61e31aafc42 Mon Sep 17 00:00:00 2001 From: Tyler Hoang Date: Wed, 6 May 2026 16:50:10 -0700 Subject: Fix mobile responsive issues on stats page Scale down heatmap cells and gaps on mobile (8px cells, 2px gaps instead of 13px/4px). Reduce stats bar row label width from 64px to 40px. Make stats list single column on mobile to improve spacing. Co-Authored-By: Claude Haiku 4.5 --- static/styles.css | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) (limited to 'static') diff --git a/static/styles.css b/static/styles.css index bb0ee43..d6d82af 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1086,6 +1086,29 @@ textarea:focus { } .heatmap-months { - margin-left: 38px; + grid-template-columns: repeat(53, 8px); + gap: 2px; + margin: 0 0 8px 20px; + font-size: 0.64rem; + } + + .heatmap-weekdays { + grid-template-rows: repeat(7, 8px); + gap: 2px; + font-size: 0.64rem; + } + + .heatmap-grid { + grid-template-columns: repeat(53, 8px); + grid-template-rows: repeat(7, 8px); + gap: 2px; + } + + .stats-bar-row { + grid-template-columns: 40px minmax(0, 1fr) auto; + } + + .stats-list li { + grid-template-columns: minmax(0, 1fr) auto; } } -- cgit v1.3-2-g0d8e