Use dynamic viewport sizing and keyboard-aware spacing to keep new-game inputs and navigation reachable in PWA landscape mode on Android tablets. Refs #30.
Made-with: Cursor
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 IndexedDB service with schema, indexes, and player stats
- Migrate GameService to async IndexedDB and auto-migrate from localStorage
- Update hooks and App handlers to async; add error handling and UX feedback
- Convert remaining JSX components to TSX
- Add test utility for IndexedDB and migration checks
- Extend game types with sync fields for future online sync
- Increased size, padding, and border radius of the button
- Changed background to bold orange with white text
- Added a plus icon before the text
- Added drop shadow and modern hover effect for emphasis
Refs #26
- Consolidated all modal-related styles into Modal.module.css; ValidationModal.module.css is now deprecated
- All main action/navigation buttons in NewGame and GameDetail use global .btn/.nav-buttons utility classes
- Removed duplicate utility classes from component CSS files
- Fixed .fullscreenToggle class naming for consistency
- Cleaned up component CSS to only contain component-specific styles
- Updated GameCompletionModal to use shared modal styles
This ensures DRY, maintainable, and consistent styling across the app.
- Refactored all components in src/components to:
- Use arrow function components and prop destructuring
- Add JSDoc for all exported components
- Improve accessibility (aria-labels, roles, etc.)
- Use correct key usage in lists
- Add comments for non-obvious logic
- Use modern event handler patterns and memoization where appropriate
- Refactored src/pages/index.astro:
- Removed <html>, <head>, and <body> (should be in layout)
- Used semantic <main> for main content
- Kept only necessary imports and markup
- Refactored src/styles/index.css:
- Removed duplicate rules
- Ensured only global resets/utilities are present
- Added comments for clarity
- Ensured no component-specific styles are present
- Used consistent formatting
Brings the codebase in line with modern Astro and Preact best practices, improves maintainability, accessibility, and code clarity.
- Move modal overlay CSS to global stylesheet for reliable overlay behavior
- Render GameCompletionModal outside main container for true overlay effect
- Refactor GameCompletionModal to use global overlay and local content styles
- Fix player score layout, color, and button styling on game detail screen
- Add global .modal and .modal.show classes to index.css
- Clean up CSS modules for modal content and responsive design
Fixes #<issue_number>
- Moved filter button bar from App.jsx to GameList.jsx for better separation of concerns.
- Updated GameList to accept filter/setFilter props and render the filter bar internally.
- Moved .new-game-button styles to global CSS for consistent styling.
- Ensured filter button styles remain in GameList.module.css.
- Improves modularity and UI consistency.
- Replaced all .astro components with .jsx Preact components and added corresponding CSS modules.
- Updated index.astro to use the new App Preact component; removed legacy script and Astro imports.
- Deleted obsolete .astro component files and main JS logic (src/scripts/index.js, public/scripts/index.js).
- Updated astro.config.mjs for Preact integration.
- Updated package.json and package-lock.json to include @astrojs/preact and preact.
- Updated tsconfig.json for Preact JSX support.
- Refactored index.css to keep only global resets and utility styles.
- All changes relate to Gitea issue #1 (refactor to astro app).
Migrates the UI from Astro/vanilla JS to a modular Preact component architecture, removing all legacy code and aligning the project with modern best practices.
Refs #1
- Split monolithic index.astro into Astro components for each screen and modal
- Moved all styles to src/styles/index.css
- Moved all JS logic to src/scripts/index.js and public/scripts/index.js
- Updated event wiring and removed inline handlers for best practice
- Ensured all components and scripts are integrated and functional
Refs #1
Frank Schwenk