23 lines
1.3 KiB
Markdown
23 lines
1.3 KiB
Markdown
# 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.
|