# 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.