Restructure app layout to prevent whole-page scrolling. The viewport
is now locked at 100vh with overflow:hidden, and individual content
areas scroll internally.
Architecture changes:
- Lock html/body at 100% height with overflow:hidden
- Fix Layout component to 100vh, Screen to 100% height
- Enable internal scrolling for content areas with flex:1 + overflow-y:auto
New game wizard improvements:
- Split forms into three sections: form-header (fixed), form-content
(scrollable), form-footer (fixed with arrow navigation)
- Fixes issue where many player names pushed navigation arrows off-screen
- Applied to Player1Step, Player2Step, Player3Step, GameTypeStep
Game list improvements:
- Filter buttons stay fixed at top
- Games container scrolls internally with overflow-y:auto
- "Neues Spiel" button wrapped with flex-shrink:0
Game detail improvements:
- Game controls stay visible while content scrolls
Additional changes:
- Add Playwright test artifact exclusions to .gitignore
- Add Docker build instructions to README.md
- Remove unnecessary setSelectionRange calls from player input steps
Benefits:
- No accidental page scrolling
- Cleaner mobile UX (no address bar show/hide issues)
- Navigation controls always visible
- Predictable, contained scrolling behavior
- Add @playwright/test as dev dependency
- Create playwright.config.ts with Chrome-only testing config
- Add npm scripts: test:record, test:e2e, test:replay
- Create 13 test recordings covering:
- 2-player and 3-player games
- 8-ball, 9-ball, and 10-ball game types
- Various race-to values (1, 3, 5, 7, 9) and "endlos" mode
- Both wechselbreak (alternating) and winnerbreak rules
- Fix Infinity handling in gameService.ts and NewGameScreen.tsx
- Parse "endlos" and "Infinity" strings as Infinity number
- Properly serialize Infinity as string in form data
- Increase GameDetail score font size from 20vh to 40vh
- Update README.md with testing documentation:
- Quick start guide for recording and running tests
- Move E2E testing from "Future Improvements" (now implemented)
- Add comprehensive tests/recordings/README.md documentation
Purpose: Establishes browser automation testing infrastructure with
real workflow recordings, enabling regression testing and interaction
documentation for all game configuration combinations.
