# Sat/Sun Toggle Flicker Issue

## Problem Description
When toggling Saturday/Sunday columns on/off, there is a visible flicker/jump in the grid layout.

**Root Cause:**
- `display: none` removes columns from DOM layout flow
- Browser recalculates table dimensions when columns are hidden/shown
- Week header colspan updates cause additional reflow
- Even with `table-layout: fixed`, colspan changes trigger re-render

## Current Implementation Status

### ✅ What Works
- **Left columns locked**: Job (140px) and Info (174px) DO NOT shift when toggling
- **Day columns fixed**: All days locked to 48px width
- **Table layout**: `table-layout: fixed` prevents day columns from resizing
- **Colgroup structure**: Only Job + Info defined, days flex naturally

### ⚠️ Remaining Issue
- **Week headers flicker**: Despite hiding with `.pl-updating` class during colspan update
- **Minor visual jump**: ~50-100ms flash when week header colspan changes
- **Acceptable level**: Job/Info stable (main goal achieved), only header row flickers slightly

## Attempted Solutions

### Attempt 1: Lock all column widths (Commit 239bf01)
- Fixed Job, Info, Footer to prevent resize
- **Result**: FAILED - table still reflowed

### Attempt 2: Add table-layout fixed + day column widths (Commit 514e10d)
- Added `<colgroup>` with all columns
- Set table-layout: fixed
- **Result**: FAILED - too rigid, broke layout

### Attempt 3: Lock left only, flex right (Commit a0445c4)
- Colgroup only for Job/Info
- No day column definitions
- **Result**: SUCCESS but flicker remains

### Attempt 4: Fix all days to 48px (Commit 979cef4)
- table-layout: fixed
- All days: 48px fixed
- **Result**: SUCCESS - Job/Info stable, days don't jump

### Attempt 5: Smooth transition (attempted, reverted)
- CSS transitions on opacity/width/padding
- **Result**: FAILED - broken layout, columns misaligned

### Attempt 6: Hide week headers during update (Commit e7e6db6)
- Add `.pl-updating` class with `opacity: 0`
- Hide → update colspan → show
- **Result**: PARTIAL - reduced flicker but still visible

## Alternative Approaches (Not Implemented)

### Option A: Remove week colspan update entirely
- Keep week headers at max colspan (7) always
- Sat/Sun columns just disappear but header stays full width
- **Pro**: Zero flicker
- **Con**: Week headers too wide when weekends hidden

### Option B: JavaScript width management
- Calculate week header width before/after toggle
- Set explicit px width on headers
- **Pro**: Precise control
- **Con**: Complex, DOM measurement slow

### Option C: Dual table rendering
- Render two tables: one with weekends, one without
- Toggle visibility of entire table
- **Pro**: Zero reflow
- **Con**: Double memory, complex data sync

### Option D: Position absolute week headers
- Remove colspan, use absolute positioning
- Calculate position with JavaScript
- **Pro**: No reflow
- **Con**: Major HTML/CSS restructure

## Recommendation

**Accept current flicker level** (Commit e7e6db6 state):
- Left columns (Job, Info) are stable ✓
- Day columns don't shift (48px fixed) ✓
- Only week headers flicker slightly (~50ms)
- Trade-off: minimal visual artifact vs. major complexity increase

**If flicker must be eliminated:**
- Implement Option A (remove colspan update)
- OR Option C (dual table rendering)
- Both require significant refactoring

## Technical Notes

- `table-layout: fixed` required for column width stability
- `<colgroup>` only for sticky columns (Job, Info)
- Day columns rely on CSS fixed widths (48px)
- `display: none` on `.pl-hidden` (tried `visibility: collapse`, didn't help)
- JavaScript selector: `.pl-col-sat:not(col)` to exclude colgroup elements
- `requestAnimationFrame` used for browser render cycle sync

## Commits History
- 239bf01: Initial column width lock attempt
- 514e10d: Add colgroup with all columns
- a0445c4: Lock left only, flex right
- 979cef4: Fix all days to 48px width
- e7e6db6: Hide week headers during update (current)