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

style: Fix desktop calendar layout and add clean mobile border

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

4
src/app/globals.css
View File

@ -219,14 +219,14 @@
/* Calendar styling - optimize cell size */
.rdp {
--rdp-cell-size: 40px;
width: 100%;
}
/* Make calendar fill available space on mobile */
@media (max-width: 640px) {
.rdp {
--rdp-cell-size: calc((100vw - 80px) / 7);
--rdp-cell-size: calc((100vw - 60px) / 7);
font-size: 0.9rem;
margin: 0 auto;
}
.rdp-month {

4
src/components/UsageCalendar.tsx
View File

@ -221,12 +221,12 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
<CardContent>
<div className="flex flex-col lg:flex-row gap-4">
{/* Calendar */}
<div className="shrink-0 overflow-x-auto">
<div className="w-full lg:w-auto overflow-x-auto flex justify-center lg:block">
<DayPicker
mode="single"
selected={selectedDate}
onSelect={handleDateSelect}
className={`rounded-md border p-3 ${theme === 'light' ? 'text-white' : 'text-slate-900 bg-background/50'}`}
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'}`}
style={{ background: calendarBackground }}
showOutsideDays={false}
components={{