initiative/specs/022-fixed-layout-bars/tasks.md

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

• 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
• 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
• 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

• 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
• 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

• T006 Verify edge cases
• 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)
• 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