# 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

```bash
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