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 <noreply@anthropic.com>

1 files changed, 24 insertions, 1 deletions

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;
   }
 }