# Tasks: Fixed Layout Bars

**Input**: Design documents from `/specs/022-fixed-layout-bars/`
**Prerequisites**: plan.md (required), spec.md (required for user stories), research.md

**Tests**: No test tasks included (not requested in spec). Existing tests must continue to pass.

**Organization**: Tasks are grouped by user story to enable independent implementation and testing of each story.

## Format: `[ID] [P?] [Story] Description`

- **[P]**: Can run in parallel (different files, no dependencies)
- **[Story]**: Which user story this task belongs to (e.g., US1, US2)
- Include exact file paths in descriptions

---

## Phase 1: User Story 1 - Fixed Navigation and Add-Creature Bars (Priority: P1) MVP

**Goal**: Pin TurnNavigation to top and ActionBar to bottom of the encounter area, with only the combatant list scrolling between them.

**Independent Test**: Add 15+ combatants so the list overflows the viewport. Scroll the combatant list and verify both bars remain visible. Also verify the layout looks correct with 0 and 1 combatants.

### Implementation for User Story 1

- [x] T001 [US1] Restructure the main layout container from single-scroll to three-zone flexbox layout in `apps/web/src/App.tsx`: remove `overflow-y-auto` from root div, add `flex flex-col` to root, add `flex-1 min-h-0` to inner wrapper, wrap TurnNavigation with `flex-shrink-0`, create a new scrollable `div` with `flex-1 overflow-y-auto` around the heading and combatant list, wrap ActionBar with `flex-shrink-0`, and adjust padding so `py-8` moves to the scrollable inner area while top/bottom bars get appropriate spacing
- [x] T002 [US1] Verify the autocomplete suggestion dropdown from ActionBar remains fully visible and interactive above the fixed bottom bar — confirm `z-50` and `absolute bottom-full` positioning in `apps/web/src/components/action-bar.tsx` is not clipped by the new scroll container
- [x] T003 [US1] Run `pnpm check` to verify all existing tests pass, linting is clean, and no regressions are introduced

**Checkpoint**: Turn navigation and add-creature bars are fixed. Combatant list scrolls independently. Autocomplete works. All checks pass.

---

## Phase 2: User Story 2 - Consistent Behavior Across Viewports (Priority: P2)

**Goal**: Ensure the fixed-bar layout works correctly across all viewport sizes and alongside the stat block side panel.

**Independent Test**: Resize the browser from 360px to 2560px wide and from 400px to 1440px tall. Verify bars stay fixed and combatant list scrolls at every size. Open the stat block panel on desktop and confirm no layout conflicts.

### Implementation for User Story 2

- [x] T004 [US2] Test and fix responsive layout issues in `apps/web/src/App.tsx` for narrow viewports (360px wide), very short viewports (400px tall), and wide viewports with the stat block panel open (1024px+ with 400px panel). Pass criteria: both bars visible, no horizontal overflow, combatant list scrollable (touch, wheel, and keyboard) at each tested size
- [x] T005 [US2] Run `pnpm check` to verify no regressions after responsive fixes

**Checkpoint**: Layout works correctly across all target viewport sizes. All checks pass.

---

## Phase 3: Polish & Cross-Cutting Concerns

- [x] T006 Verify edge cases
- [x] T008 [US1] Add auto-scroll to active combatant on turn change: add `ref` prop to `CombatantRow` (`apps/web/src/components/combatant-row.tsx`), attach ref to active row in `App.tsx`, add `useEffect` keyed on `activeIndex` calling `scrollIntoView({ block: "nearest", behavior: "smooth" })`: zero combatants (empty state visible between bars), one combatant (no scroll needed, no visual artifacts), and very short viewport (combatant area still scrollable)
- [x] T007 Final `pnpm check` to confirm merge readiness

---

## Dependencies & Execution Order

### Phase Dependencies

- **Phase 1 (US1)**: No prerequisites — can start immediately
- **Phase 2 (US2)**: Depends on Phase 1 (T001 must be complete for responsive testing)
- **Phase 3 (Polish)**: Depends on Phase 2

### Within User Story 1

- T001 (layout restructure) → T002 (autocomplete verification) → T003 (check gate)
- T001 is the core change; T002 and T003 are verification steps

### Within User Story 2

- T004 (responsive fixes) → T005 (check gate)

---

## Implementation Strategy

### MVP First (User Story 1 Only)

1. Complete T001: Restructure App.tsx layout
2. Complete T002: Verify autocomplete dropdown
3. Complete T003: Run pnpm check
4. **STOP and VALIDATE**: Fixed bars work with scrollable combatant list
5. This alone delivers the core feature value

### Incremental Delivery

1. US1 → Fixed layout works on typical desktop → Deploy/Demo (MVP!)
2. US2 → Responsive edge cases fixed → Deploy/Demo
3. Polish → Edge cases verified, merge-ready

---

## Notes

- This is a CSS-only layout change — no domain, application, or data model changes
- Primary change is in a single file: `apps/web/src/App.tsx`
- ActionBar (`action-bar.tsx`) may need minor verification but likely no code changes
- StatBlockPanel is independent (fixed positioning as sibling) and should not be affected
- The "Initiative Tracker" heading moves inside the scrollable area per spec assumption