From fee5c919583408155526ddb709032d7c71da7664 Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Sun, 25 Jan 2026 19:23:42 -0700
Subject: [PATCH] Optimize usage calendar for mobile: fluid width, remove
 borders, adjust padding

---
 src/app/globals.css              | 20 +++++++++++++++++---
 src/components/UsageCalendar.tsx |  9 +++------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index dc3374f..ad986c8 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -224,9 +224,9 @@
   /* Make calendar fill available space on mobile */
   @media (max-width: 640px) {
     .rdp {
-      --rdp-cell-size: calc((100vw - 50px) / 7);
-      font-size: 0.9rem;
-      margin: 0 auto;
+      --rdp-cell-size: 100%;
+      width: 100%;
+      margin: 0;
     }
 
     .rdp-month {
@@ -235,6 +235,20 @@
 
     .rdp-table {
       width: 100%;
+      max-width: 100%;
+      display: table;
+      table-layout: fixed;
+    }
+
+    .rdp-day {
+      width: 100%;
+      max-width: none;
+      height: auto;
+      aspect-ratio: 1;
+    }
+
+    .rdp-head_cell {
+      width: 100%;
     }
   }
 
diff --git a/src/components/UsageCalendar.tsx b/src/components/UsageCalendar.tsx
index 180851f..4c1d054 100644
--- a/src/components/UsageCalendar.tsx
+++ b/src/components/UsageCalendar.tsx
@@ -208,9 +208,7 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
     );
   }, [usageData, getColorStyle]);
 
-  const calendarBackground = theme === 'light'
-    ? 'linear-gradient(135deg, rgba(20, 20, 30, 0.95) 0%, rgba(30, 30, 45, 0.9) 100%)'
-    : 'linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 245, 0.9) 100%)';
+
 
   return (
     <>
@@ -221,13 +219,12 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
         <CardContent className="p-1 sm:p-6">
           <div className="flex flex-col lg:flex-row gap-4">
             {/* Calendar */}
-            <div className="w-full lg:w-auto overflow-x-auto flex justify-center lg:block">
+            <div className="w-full lg:w-auto overflow-x-auto block">
               <DayPicker
                 mode="single"
                 selected={selectedDate}
                 onSelect={handleDateSelect}
-                className={`rounded-md sm:border p-0 sm:p-3 ${theme === 'light' ? 'text-white border-white/20' : 'text-slate-900 bg-background/50 border-slate-200/20'}`}
-                style={{ background: calendarBackground }}
+                className={`rounded-md sm:border p-0 sm:p-3 w-full ${theme === 'light' ? 'text-slate-900 border-slate-200/20' : 'text-white border-white/20'}`}
                 showOutsideDays={false}
                 components={{
                   DayButton: CustomDayButton,