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

Quickstart: 022-fixed-layout-bars

What This Feature Does

Converts the encounter tracker from a single scrollable page to a three-zone layout:

• Fixed top bar: Turn navigation (Previous / Round X / Next)
• Scrollable middle: Combatant list
• Fixed bottom bar: Add-creature action bar

Key File

The only file that needs structural changes:

• apps/web/src/App.tsx — Main layout container

Development

pnpm --filter web dev    # Start dev server
pnpm check               # Run all checks before committing

Testing Approach

1. Add 15+ combatants to create overflow
2. Scroll the combatant list — top and bottom bars must stay fixed
3. Verify autocomplete suggestions appear above the bottom bar
4. Test with stat block panel open on desktop
5. Resize viewport to verify responsive behavior