diff --git a/src/components/HabitGrid.jsx b/src/components/HabitGrid.jsx index 29c966b..e206766 100644 --- a/src/components/HabitGrid.jsx +++ b/src/components/HabitGrid.jsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import React, { useMemo, useEffect } from 'react'; import { motion } from 'framer-motion'; import { getColorIntensity, isToday, formatDate, getWeekdayLabel } from '../lib/utils-habit'; import { toggleCompletion } from '../lib/storage'; @@ -29,29 +29,37 @@ const HabitGrid = ({ habit, onUpdate, fullView = false }) => { return weeksArray; }, [fullView]); + useEffect(() => { + // Scroll to the rightmost (most recent) week on mount + const gridScroll = document.querySelector('.grid-scroll'); + if (gridScroll) { + gridScroll.scrollLeft = gridScroll.scrollWidth; + } + }, []); + const handleCellClick = (date) => { toggleCompletion(habit.id, formatDate(date)); onUpdate(); }; return ( -
-
+
+

Activity Calendar

Tap any day to mark it as complete

-
-
+
+
{/* Weekday labels: Monday (top) to Sunday (bottom) */}
-
+
{[1, 2, 3, 4, 5, 6, 0].map((day) => (
{getWeekdayLabel(day)}