AI removed features....

plan.md

@@ -1,13 +1,22 @@
-# Plan: Fix Wakeup Plot Timezone Display
+# Sleep Timetable Bug Fixes
 
-## Status: COMPLETED
+## 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.
 
-## Problem
-`WakeupPlot.tsx` shows incorrect wakeup times (e.g., showing 01:00 instead of 05:00 when input is 03:00 UTC in Stockholm). This was caused by sending a local reference time to the backend, which then calculated a delta relative to that time being treated as UTC.
+## Implementation Plan
 
-## Solution
-1. **Frontend API Fix**: Modified `fetchWakeSleepTimes` in `frontend/src/api/client.ts` to convert the local `wakeup_ref` and `bedtime_ref` HH:MM strings into UTC HH:MM strings before sending them to the backend.
-2. **Frontend Component Fix**: Updated `WakeupPlot.tsx` and `BedtimePlot.tsx` to use the returned `wakeup_minutes`/`bedtime_minutes` (which is now a correctly calculated timezone-invariant delta) directly as the offset from reference, instead of attempting to re-adjust it using local timezone offsets.
+### 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.
 
-## Verification
-Verified with Playwright test in `Europe/Stockholm` timezone: 03:00 UTC input correctly displays as 05:00.
+### 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.