Commit Graph

3 Commits

Author SHA1 Message Date
Frank Schwenk
99be99d120 Make game creation wizard fit viewport without scrolling
Replace scrollable form content with responsive sizing that
automatically scales elements to fit available viewport height.

CSS improvements:
- Disable scrolling: overflow-y:auto → overflow:hidden in form-content
- Implement fluid typography with clamp() for titles, labels, buttons
- Add responsive spacing using clamp() for margins and padding
- Scale progress dots from 10px-16px based on viewport height
- Reduce button dimensions (60px min-width, 36px min-height)
- Enable element shrinking with flex-shrink:1 and min-height:0

Component cleanup:
- Remove auto-focus useEffect from Player1/2/3Step components
- Prevents unwanted layout shifts on wizard mount

Benefits:
- All elements visible without scrolling
- Responsive design scales smoothly across viewport sizes
- Cleaner UX with no scrollbars in form wizard
- Better space utilization on small screens
2025-11-07 14:30:39 +01:00
Frank Schwenk
076d6ced36 Implement fixed viewport with internal scrolling
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
2025-11-07 14:23:03 +01:00
Frank Schwenk
f8b461e189 refactor(new-game): extract Player1Step into separate module
Refs #30

- Add src/components/new-game/Player1Step.tsx
- Replace inline Player1Step with import in NewGame.tsx
- Preserve behavior; no UI or logic changes
2025-10-30 15:09:02 +01:00