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

.gitignore

@@ -25,3 +25,8 @@ pnpm-debug.log*
 
 .gitea
 dev/.gitea
+
+# Playwright test artifacts
+playwright-report/
+test-results/
+playwright/.cache/

README.md

@@ -81,6 +81,12 @@ npm run test:record  # Record browser interactions with Playwright
 npm run test:e2e    # Run all recorded browser automation scripts
 ```
 
+### Building with Docker
+```bash
+# Build for production using Docker
+docker run -it -v $(pwd):/app -w /app --rm node:latest npx astro build
+```
+
 ## 🧪 Testing
 
 The project uses **Playwright** for browser automation and recording. This allows you to record interactions once and replay them anytime, making it easy to test repetitive workflows.

src/components/BscScoreApp.astro

@@ -10,8 +10,9 @@
 
 <style>
   #app-root {
-    min-height: 100vh;
+    height: 100%;
     width: 100%;
+    overflow: hidden;
   }
   
   /* Progressive enhancement styles */

src/components/GameDetail.module.css

@@ -19,14 +19,27 @@
 .screen-content {
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
+    height: 100%;
     padding: 20px;
     overflow-y: auto;
+    overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
+    min-height: 0;
 }
+.game-detail {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: var(--space-md);
+    min-height: 0;
+}
+
 .game-title {
     font-size: 24px;
     color: #ccc;
+    flex-shrink: 0;
 }
 .game-header {
     display: flex;
@@ -34,12 +47,14 @@
     align-items: center;
     margin-bottom: 20px;
     width: 100%;
+    flex-shrink: 0;
 }
 .scores-container {
     display: flex;
     justify-content: space-between;
     gap: 32px;
     min-height: 0;
+    flex-shrink: 0;
 }
 .player-score {
     flex: 1;
@@ -202,8 +217,10 @@
     flex-direction: row;
     gap: 24px;
     margin: 40px 0 0 0;
+    padding-bottom: var(--space-xl);
     width: 100%;
     justify-content: center;
+    flex-shrink: 0;
 }
 .franky .player-name {
     font-weight: bold;

src/components/GameList.module.css

@@ -23,8 +23,9 @@
 
 .game-list {
     width: 100%;
-    flex: 1;
+    display: flex;
-    overflow-y: auto;
+    flex-direction: column;
+    min-height: 0;
 }
 
 /* Filter buttons with improved symmetry */
@@ -36,6 +37,7 @@
     border-radius: var(--radius-md);
     overflow: hidden;
     box-shadow: var(--shadow-sm);
+    flex-shrink: 0;
 }
 
 .filter-button {
@@ -71,6 +73,11 @@
     flex-direction: column;
     gap: var(--space-md);
     margin-top: var(--space-lg);
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 0;
+    padding-bottom: var(--space-md);
 }
 
 /* Game item with better symmetry and spacing */

src/components/GameList.tsx

@@ -56,7 +56,7 @@ export default function GameList({
   ];
 
   return (
-    <div className={styles['game-list'] + ' ' + styles['games-container']}>
+    <div className={styles['game-list']}>
       <div className={styles['filter-buttons']}>
         {filterButtons.map(({ key, label, ariaLabel }) => (
           <Button
@@ -71,6 +71,7 @@ export default function GameList({
         ))}
       </div>
       
+      <div className={styles['games-container']}>
         {filteredGames.length === 0 ? (
           <div className={styles['empty-state']}>Keine Spiele vorhanden</div>
         ) : (
@@ -123,5 +124,6 @@ export default function GameList({
         })
         )}
       </div>
+    </div>
   );
 }

src/components/NewGame.module.css

@@ -13,10 +13,12 @@
 .screen-content {
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
+    height: 100%;
     padding: var(--space-lg);
     overflow-y: auto;
+    overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
+    min-height: 0;
 }
 .screen-title {
     font-size: var(--font-size-xxl);
@@ -122,11 +124,31 @@
     background: var(--color-surface);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-lg);
-    padding: var(--space-xl) var(--space-lg) var(--space-lg) var(--space-lg);
+    padding: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--space-lg);
     border: 1px solid var(--color-border);
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.form-header {
+    flex-shrink: 0;
+    padding: var(--space-xl) var(--space-lg) var(--space-md) var(--space-lg);
+}
+
+.form-content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0 var(--space-lg);
+    min-height: 0;
+}
+
+.form-footer {
+    flex-shrink: 0;
+    padding: var(--space-lg);
 }
 .progress-indicator {
     display: flex;

src/components/new-game/GameTypeStep.tsx

@@ -26,6 +26,7 @@ export const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeSt
 
   return (
     <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spielart auswählen">
+      <div className={styles['form-header']}>
         <div className={styles['screen-title']}>Spielart auswählen</div>
         <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
           <span className={styles['progress-dot']} />
@@ -36,6 +37,9 @@ export const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeSt
           <span className={styles['progress-dot']} />
           <span className={styles['progress-dot']} />
         </div>
+      </div>
+      
+      <div className={styles['form-content']}>
         <div className={styles['game-type-selection']}>
           {gameTypes.map(type => (
             <button
@@ -48,7 +52,10 @@ export const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeSt
             </button>
           ))}
         </div>
-      <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
+      </div>
+      
+      <div className={styles['form-footer']}>
+        <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <button
           type="button"
           className={styles['arrow-btn']}
@@ -79,6 +86,7 @@ export const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeSt
           &#8594;
         </button>
         </div>
+      </div>
     </form>
   );
 };

src/components/new-game/Player1Step.tsx

@@ -22,10 +22,6 @@ export const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue
     const el = inputRef.current;
     if (el) {
       el.focus();
-      const end = el.value.length;
-      try {
-        el.setSelectionRange(end, end);
-      } catch {}
     }
   }, []);
 
@@ -85,6 +81,7 @@ export const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue
 
   return (
     <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 1 Eingabe" autoComplete="off">
+      <div className={styles['form-header']}>
         <div className={styles['screen-title']}>Name Spieler 1</div>
         <div className={styles['progress-indicator']} style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_MEDIUM }}>
           <span className={styles['progress-dot'] + ' ' + styles['active']} />
@@ -95,6 +92,9 @@ export const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue
           <span className={styles['progress-dot']} />
           <span className={styles['progress-dot']} />
         </div>
+      </div>
+      
+      <div className={styles['form-content']}>
         <div className={styles['player-input'] + ' ' + styles['player1-input']} style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_LARGE, position: 'relative' }}>
         <label htmlFor="player1-input" style={{ fontSize: UI_CONSTANTS.LABEL_FONT_SIZE, fontWeight: 600 }}>Spieler 1</label>
         <div style={{ position: 'relative', width: '100%' }}>
@@ -224,14 +224,10 @@ export const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue
             {error}
           </div>
         )}
-      {isModalOpen && (
+      </div>
-        <PlayerSelectModal
+      
-          players={playerNameHistory}
+      <div className={styles['form-footer']}>
-          onSelect={handleModalSelect}
+        <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          onClose={() => setIsModalOpen(false)}
-        />
-      )}
-      <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
         <button
           type="button"
           className={styles['arrow-btn']}
@@ -251,6 +247,15 @@ export const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue
           &#8594;
         </button>
         </div>
+      </div>
+      
+      {isModalOpen && (
+        <PlayerSelectModal
+          players={playerNameHistory}
+          onSelect={handleModalSelect}
+          onClose={() => setIsModalOpen(false)}
+        />
+      )}
     </form>
   );
 };

src/components/new-game/Player2Step.tsx

@@ -19,10 +19,6 @@ export const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue
     const el = inputRef.current;
     if (el) {
       el.focus();
-      const end = el.value.length;
-      try {
-        el.setSelectionRange(end, end);
-      } catch {}
     }
   }, []);
 
@@ -61,6 +57,7 @@ export const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue
 
   return (
     <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 2 Eingabe" autoComplete="off">
+      <div className={styles['form-header']}>
         <div className={styles['screen-title']}>Name Spieler 2</div>
         <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
           <span className={styles['progress-dot']} />
@@ -71,6 +68,9 @@ export const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue
           <span className={styles['progress-dot']} />
           <span className={styles['progress-dot']} />
         </div>
+      </div>
+      
+      <div className={styles['form-content']}>
         <div className={styles['player-input'] + ' ' + styles['player2-input']} style={{ marginBottom: 32, position: 'relative' }}>
         <label htmlFor="player2-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 2</label>
         <div style={{ position: 'relative', width: '100%' }}>
@@ -131,7 +131,10 @@ export const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue
         )}
         </div>
         {error && <div className={styles['validation-error']} style={{ marginBottom: 16 }}>{error}</div>}
-      <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
+      </div>
+      
+      <div className={styles['form-footer']}>
+        <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
           <button
             type="button"
             className={styles['arrow-btn']}
@@ -151,6 +154,7 @@ export const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue
             &#8594;
           </button>
         </div>
+      </div>
     </form>
   );
 };

src/components/new-game/Player3Step.tsx

@@ -18,10 +18,6 @@ export const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue
     const el = inputRef.current;
     if (el) {
       el.focus();
-      const end = el.value.length;
-      try {
-        el.setSelectionRange(end, end);
-      } catch {}
     }
   }, []);
 
@@ -58,6 +54,7 @@ export const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue
 
   return (
     <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spieler 3 Eingabe" autoComplete="off">
+      <div className={styles['form-header']}>
         <div className={styles['screen-title']}>Name Spieler 3 (optional)</div>
         <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
           <span className={styles['progress-dot']} />
@@ -68,6 +65,9 @@ export const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue
           <span className={styles['progress-dot']} />
           <span className={styles['progress-dot']} />
         </div>
+      </div>
+      
+      <div className={styles['form-content']}>
         <div className={styles['player-input'] + ' ' + styles['player3-input']} style={{ marginBottom: 32, position: 'relative' }}>
         <label htmlFor="player3-input" style={{ fontSize: '1.3rem', fontWeight: 600 }}>Spieler 3 (optional)</label>
         <div style={{ position: 'relative', width: '100%' }}>
@@ -127,7 +127,10 @@ export const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue
           </div>
         )}
         </div>
-      <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
+      </div>
+      
+      <div className={styles['form-footer']}>
+        <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
           <button
             type="button"
             className={styles['arrow-btn']}
@@ -157,6 +160,7 @@ export const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue
             </button>
           </div>
         </div>
+      </div>
     </form>
   );
 };

src/components/screens/GameListScreen.tsx

@@ -23,6 +23,7 @@ export default function GameListScreen({
 }: GameListScreenProps) {
   return (
     <Screen>
+      <div style={{ flexShrink: 0 }}>
         <Button
           variant="primary"
           size="large"
@@ -32,6 +33,7 @@ export default function GameListScreen({
         >
           + Neues Spiel
         </Button>
+      </div>
       
       <GameList
         games={games}

src/components/ui/Layout.module.css

@@ -1,5 +1,6 @@
 .layout {
-  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
   background-color: var(--color-background);
   color: var(--color-text);
   display: flex;
@@ -12,13 +13,19 @@
   margin: 0 auto;
   padding: var(--space-md);
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
 }
 
 .screen {
   width: 100%;
-  min-height: 100vh;
+  height: 100%;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
 }
 
 /* Tablet optimizations */

src/styles/index.css

@@ -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;