style: Improve usage calendar sizing on mobile devices

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