babymonitor/plan.md

Sleep Timetable Bug Fixes

Identified Issues

1. Pre-selection: Component doesn't always pre-select the latest date across all tiers.
2. Grid Layout (Medium Tier): Grid columns are hardcoded to 3, causing breakage when fewer than 3 days are displayed at the end of a range.
3. Selector Information: Tabs only show weekday names, making it hard to distinguish dates.

Implementation Plan

1. Fix Pre-selection

• Add a useEffect to set selectedDayIndex to the last index of the days array whenever the days list is initialized or updated. This ensures "today" (the latest date) is selected by default.

2. Fix Grid Alignment

• Refactor the gridTemplateColumns logic for both the header and time grid.
• Instead of hardcoding tiers (e.g., repeat(3, 1fr)), use the actual number of days in the current view: 4rem repeat(${visibleDays.length}, 1fr). This allows the grid to gracefully handle 1, 2, or 3 columns.

3. Enhance Selector Labels

• Implement a formatDayLabel helper that combines the short weekday name and the day of the month (e.g., "FRI 24").
• Update tabGroups generation for both 'medium' (range) and 'small' (single day) tiers to use this descriptive label.

4. UI Compactness

• Adjust spacing (margins/paddings) in the mobile/medium view to reduce overall component height and keep selectors closer to the grid.