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

style: Refine mobile calendar fit and padding

Browse Source
This commit is contained in:
Avery Felts 2026-01-25 19:12:24 -07:00
parent b78640bffb
commit 10dd95be60
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 - 40px) / 7);
--rdp-cell-size: calc((100vw - 50px) / 7);
font-size: 0.9rem;
margin: 0 auto;
}

4
src/components/UsageCalendar.tsx
View File

@ -214,11 +214,11 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
return (
<>
<Card className="bg-card/80 backdrop-blur-xl shadow-xl drop-shadow-lg hover-lift transition-all duration-300 border-white/10">
<Card className="bg-card/80 backdrop-blur-xl shadow-xl drop-shadow-lg hover-lift transition-all duration-300 border-white/10 overflow-hidden">
<CardHeader>
<CardTitle>Usage Calendar</CardTitle>
</CardHeader>
<CardContent className="p-0.5 sm:p-6">
<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">