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
This commit is contained in:
@@ -85,11 +85,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
Reference in New Issue
Block a user