diff --git a/package.json b/package.json index 03d8495..50037c9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "my-weekly-todo-list", - "version": "1.81.6", + "version": "1.81.7", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view", "main": "index.js", "scripts": { diff --git a/src/app/globals.css b/src/app/globals.css index 8a97bb7..7ee3218 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3479,10 +3479,11 @@ h3 { border-bottom-color: var(--weekly-border, #333); } -/* On mobile, list-view day header must clear the sticky mobile header bar (~48px) */ +/* On mobile, list-view day header is not sticky — it just flows with content */ @media (max-width: 768px) { .weekly-container.list-view .weekly-day-header { - top: calc(48px + env(safe-area-inset-top, 0px)); + position: relative !important; + top: auto !important; } } @@ -4943,16 +4944,17 @@ h3 { min-height: 100% !important; } } -/* Mobile: allow scroll on grid but keep day columns visible for sticky headers */ +/* Mobile: all inner containers stay non-scrolling — time-grid-wrapper is the sole scroll container */ @media (max-width: 768px) { .time-grid-on .weekly-days-grid { - overflow-y: auto !important; + overflow-y: visible !important; overflow-x: clip !important; } .time-grid-on .weekly-day-column { overflow-y: visible !important; overflow-x: visible !important; max-height: none !important; + touch-action: pan-y; } .time-grid-on .time-slots-container, .time-grid-on .time-column-slots, diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx index e6965ba..61b60a2 100644 --- a/src/components/WeeklyView.tsx +++ b/src/components/WeeklyView.tsx @@ -569,17 +569,19 @@ export default function WeeklyView() { const savedViewDaysRef = useRef(7); // Track user's saved preference for restoring on resize const [isLoading, setIsLoading] = useState(true); - // Responsive: auto-adjust viewDays based on screen width + // Responsive: auto-adjust viewDays based on screen orientation / width useEffect(() => { - const getResponsiveViewDays = (width: number): number => { - if (width <= 480) return 1; - if (width <= 768) return 3; + const getResponsiveViewDays = (width: number, height: number): number => { + if (width <= 768) { + // Mobile: portrait → 1 day, landscape → 3 days + return height > width ? 1 : 3; + } if (width <= 1024) return Math.min(savedViewDaysRef.current, 5); return savedViewDaysRef.current; }; const handleResize = () => { - const responsiveDays = getResponsiveViewDays(window.innerWidth); + const responsiveDays = getResponsiveViewDays(window.innerWidth, window.innerHeight); setViewDays(responsiveDays); }; @@ -1249,7 +1251,13 @@ export default function WeeklyView() { // Sync individual states to profile data if (profileData.viewStyle) setViewStyle(profileData.viewStyle); - if (profileData.viewDays) setViewDays(profileData.viewDays); + if (profileData.viewDays) { + savedViewDaysRef.current = profileData.viewDays; + const w = window.innerWidth, h = window.innerHeight; + if (w <= 768) setViewDays(h > w ? 1 : 3); + else if (w <= 1024) setViewDays(Math.min(profileData.viewDays, 5)); + else setViewDays(profileData.viewDays); + } if (profileData.showTimeGrid !== undefined) setShowTimeGrid(profileData.showTimeGrid); if (profileData.showSomeday !== undefined) setShowSomeday(profileData.showSomeday); if (profileData.showAllDayEvents !== undefined) setShowAllDay(profileData.showAllDayEvents); @@ -2244,10 +2252,9 @@ export default function WeeklyView() { } if (data.user.viewDays !== undefined) { savedViewDaysRef.current = data.user.viewDays; - const width = window.innerWidth; - if (width <= 480) setViewDays(1); - else if (width <= 768) setViewDays(3); - else if (width <= 1024) setViewDays(Math.min(data.user.viewDays, 5)); + const w = window.innerWidth, h = window.innerHeight; + if (w <= 768) setViewDays(h > w ? 1 : 3); + else if (w <= 1024) setViewDays(Math.min(data.user.viewDays, 5)); else setViewDays(data.user.viewDays); } if (data.user.cellDuration !== undefined) @@ -2258,10 +2265,9 @@ export default function WeeklyView() { if (cookieViewDays) { const v = Number(cookieViewDays); savedViewDaysRef.current = v; - const width = window.innerWidth; - if (width <= 480) setViewDays(1); - else if (width <= 768) setViewDays(3); - else if (width <= 1024) setViewDays(Math.min(v, 5)); + const w = window.innerWidth, h = window.innerHeight; + if (w <= 768) setViewDays(h > w ? 1 : 3); + else if (w <= 1024) setViewDays(Math.min(v, 5)); else setViewDays(v); } if (data.user.weekdayFormat) { @@ -5442,7 +5448,7 @@ export default function WeeklyView() {