From b78640bffb152294aafbe8086fc8fc2c84d0ac02 Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Sun, 25 Jan 2026 18:57:29 -0700
Subject: [PATCH] style: Maximize usage calendar on mobile (full bleed)

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

diff --git a/src/app/globals.css b/src/app/globals.css
index f076455..38c6120 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -224,7 +224,7 @@
   /* Make calendar fill available space on mobile */
   @media (max-width: 640px) {
     .rdp {
-      --rdp-cell-size: calc((100vw - 60px) / 7);
+      --rdp-cell-size: calc((100vw - 40px) / 7);
       font-size: 0.9rem;
       margin: 0 auto;
     }
diff --git a/src/components/UsageCalendar.tsx b/src/components/UsageCalendar.tsx
index d3433cf..b216f65 100644
--- a/src/components/UsageCalendar.tsx
+++ b/src/components/UsageCalendar.tsx
@@ -218,7 +218,7 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
         <CardHeader>
           <CardTitle>Usage Calendar</CardTitle>
         </CardHeader>
-        <CardContent>
+        <CardContent className="p-0.5 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">
@@ -226,7 +226,7 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
                 mode="single"
                 selected={selectedDate}
                 onSelect={handleDateSelect}
-                className={`rounded-md border p-0 sm:p-3 ${theme === 'light' ? 'text-white border-white/20' : 'text-slate-900 bg-background/50 border-slate-200/20'}`}
+                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 }}
                 showOutsideDays={false}
                 components={{