averyfelts/Stop_smoking_website_ver2
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Maximize usage calendar on mobile (full bleed)

Browse Source
This commit is contained in:
Avery Felts 2026-01-25 18:57:29 -07:00
parent 71c241b7c1
commit b78640bffb
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/globals.css
View File

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

4
src/components/UsageCalendar.tsx
View File

@ -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={{