From 632ccd2cc4d0a9e367bb2e720b69ace6ecc79af1 Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Sun, 25 Jan 2026 18:40:38 -0700
Subject: [PATCH] style: Improve usage calendar sizing on mobile devices

---
 src/app/globals.css | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 74c8c00..33f7277 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -216,16 +216,32 @@
       radial-gradient(ellipse at 80% 85%, rgba(239, 68, 68, 0.08) 0%, transparent 35%);
   }
 
-  /* Calendar styling - reduce overall size */
+  /* Calendar styling - optimize cell size */
   .rdp {
-    --rdp-cell-size: 36px;
+    --rdp-cell-size: 40px;
+    width: 100%;
   }
 
-  /* Mobile calendar adjustments */
+  /* Make calendar fill available space on mobile */
   @media (max-width: 640px) {
     .rdp {
-      --rdp-cell-size: 32px;
-      font-size: 0.875rem;
+      --rdp-cell-size: calc((100vw - 80px) / 7);
+      font-size: 0.9rem;
+    }
+
+    .rdp-month {
+      width: 100%;
+    }
+
+    .rdp-table {
+      width: 100%;
+    }
+  }
+
+  /* Tablet sizing */
+  @media (min-width: 641px) and (max-width: 1024px) {
+    .rdp {
+      --rdp-cell-size: 44px;
     }
   }
 }