From 076d6ced3621a1fc766bfec89ec450b908de37a8 Mon Sep 17 00:00:00 2001
From: Frank Schwenk <frank@frank-schwenk.de>
Date: Fri, 7 Nov 2025 14:23:03 +0100
Subject: [PATCH] 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                                |  5 ++
 README.md                                 |  6 ++
 src/components/BscScoreApp.astro          |  3 +-
 src/components/GameDetail.module.css      | 19 +++++-
 src/components/GameList.module.css        | 11 +++-
 src/components/GameList.tsx               | 14 ++--
 src/components/NewGame.module.css         | 28 +++++++-
 src/components/new-game/GameTypeStep.tsx  | 50 +++++++++------
 src/components/new-game/Player1Step.tsx   | 77 +++++++++++-----------
 src/components/new-game/Player2Step.tsx   | 72 +++++++++++----------
 src/components/new-game/Player3Step.tsx   | 78 ++++++++++++-----------
 src/components/screens/GameListScreen.tsx | 20 +++---
 src/components/ui/Layout.module.css       | 11 +++-
 src/styles/index.css                      |  6 +-
 14 files changed, 247 insertions(+), 153 deletions(-)

diff --git a/.gitignore b/.gitignore
index c1c2679..72afa6c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,8 @@ pnpm-debug.log*
 
 .gitea
 dev/.gitea
+
+# Playwright test artifacts
+playwright-report/
+test-results/
+playwright/.cache/
diff --git a/README.md b/README.md
index fcd01c9..edc5635 100644
--- a/README.md
+++ b/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.
diff --git a/src/components/BscScoreApp.astro b/src/components/BscScoreApp.astro
index c1770af..0897f72 100644
--- a/src/components/BscScoreApp.astro
+++ b/src/components/BscScoreApp.astro
@@ -10,8 +10,9 @@
 
 <style>
   #app-root {
-    min-height: 100vh;
+    height: 100%;
     width: 100%;
+    overflow: hidden;
   }
   
   /* Progressive enhancement styles */
diff --git a/src/components/GameDetail.module.css b/src/components/GameDetail.module.css
index f5e522b..81b8279 100644
--- a/src/components/GameDetail.module.css
+++ b/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;
diff --git a/src/components/GameList.module.css b/src/components/GameList.module.css
index be78724..6f26861 100644
--- a/src/components/GameList.module.css
+++ b/src/components/GameList.module.css
@@ -23,8 +23,9 @@
 
 .game-list {
     width: 100%;
-    flex: 1;
-    overflow-y: auto;
+    display: flex;
+    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 */
diff --git a/src/components/GameList.tsx b/src/components/GameList.tsx
index 485ba0e..c9a9961 100644
--- a/src/components/GameList.tsx
+++ b/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,10 +71,11 @@ export default function GameList({
         ))}
       </div>
       
-      {filteredGames.length === 0 ? (
-        <div className={styles['empty-state']}>Keine Spiele vorhanden</div>
-      ) : (
-        filteredGames.map(game => {
+      <div className={styles['games-container']}>
+        {filteredGames.length === 0 ? (
+          <div className={styles['empty-state']}>Keine Spiele vorhanden</div>
+        ) : (
+          filteredGames.map(game => {
           const playerNames = getPlayerNames(game);
           const scores = getScores(game);
           
@@ -121,7 +122,8 @@ export default function GameList({
             </Card>
           );
         })
-      )}
+        )}
+      </div>
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/components/NewGame.module.css b/src/components/NewGame.module.css
index 8edff3e..15a60d2 100644
--- a/src/components/NewGame.module.css
+++ b/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;
diff --git a/src/components/new-game/GameTypeStep.tsx b/src/components/new-game/GameTypeStep.tsx
index 2ca5cb7..c7973b3 100644
--- a/src/components/new-game/GameTypeStep.tsx
+++ b/src/components/new-game/GameTypeStep.tsx
@@ -26,29 +26,36 @@ export const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeSt
 
   return (
     <form className={styles['new-game-form']} onSubmit={handleSubmit} aria-label="Spielart auswählen">
-      <div className={styles['screen-title']}>Spielart auswählen</div>
-      <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot'] + ' ' + styles['active']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
+      <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']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot'] + ' ' + styles['active']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+        </div>
       </div>
-      <div className={styles['game-type-selection']}>
-        {gameTypes.map(type => (
-          <button
-            key={type}
-            type="button"
-            className={`${styles['game-type-btn']} ${gameType === type ? styles.selected : ''}`}
-            onClick={() => handleSelect(type)}
-          >
-            {type}
-          </button>
-        ))}
+      
+      <div className={styles['form-content']}>
+        <div className={styles['game-type-selection']}>
+          {gameTypes.map(type => (
+            <button
+              key={type}
+              type="button"
+              className={`${styles['game-type-btn']} ${gameType === type ? styles.selected : ''}`}
+              onClick={() => handleSelect(type)}
+            >
+              {type}
+            </button>
+          ))}
+        </div>
       </div>
-      <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
+      
+      <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']}
@@ -78,6 +85,7 @@ export const GameTypeStep = ({ onNext, onCancel, initialValue = '' }: GameTypeSt
         >
           &#8594;
         </button>
+        </div>
       </div>
     </form>
   );
diff --git a/src/components/new-game/Player1Step.tsx b/src/components/new-game/Player1Step.tsx
index 0230dec..63d5a3d 100644
--- a/src/components/new-game/Player1Step.tsx
+++ b/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,17 +81,21 @@ 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['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']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
+      <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']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+        </div>
       </div>
-      <div className={styles['player-input'] + ' ' + styles['player1-input']} style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM_LARGE, position: 'relative' }}>
+      
+      <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%' }}>
           <input
@@ -209,29 +209,25 @@ export const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue
             )}
           </div>
         )}
-      </div>
-      {error && (
-        <div 
-          className={styles['validation-error']} 
-          style={{ 
-            marginBottom: 16,
-            ...ERROR_STYLES.CONTAINER
-          }}
-          role="alert"
-          aria-live="polite"
-        >
-          <span style={ERROR_STYLES.ICON}>⚠️</span>
-          {error}
         </div>
-      )}
-      {isModalOpen && (
-        <PlayerSelectModal
-          players={playerNameHistory}
-          onSelect={handleModalSelect}
-          onClose={() => setIsModalOpen(false)}
-        />
-      )}
-      <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
+        {error && (
+          <div 
+            className={styles['validation-error']} 
+            style={{ 
+              marginBottom: 16,
+              ...ERROR_STYLES.CONTAINER
+            }}
+            role="alert"
+            aria-live="polite"
+          >
+            <span style={ERROR_STYLES.ICON}>⚠️</span>
+            {error}
+          </div>
+        )}
+      </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']}
@@ -250,7 +246,16 @@ export const Player1Step = ({ playerNameHistory, onNext, onCancel, initialValue
         >
           &#8594;
         </button>
+        </div>
       </div>
+      
+      {isModalOpen && (
+        <PlayerSelectModal
+          players={playerNameHistory}
+          onSelect={handleModalSelect}
+          onClose={() => setIsModalOpen(false)}
+        />
+      )}
     </form>
   );
 };
diff --git a/src/components/new-game/Player2Step.tsx b/src/components/new-game/Player2Step.tsx
index 5d4daec..6352499 100644
--- a/src/components/new-game/Player2Step.tsx
+++ b/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,17 +57,21 @@ 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['screen-title']}>Name Spieler 2</div>
-      <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot'] + ' ' + styles['active']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
+      <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']} />
+          <span className={styles['progress-dot'] + ' ' + styles['active']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+        </div>
       </div>
-      <div className={styles['player-input'] + ' ' + styles['player2-input']} style={{ marginBottom: 32, position: 'relative' }}>
+      
+      <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%' }}>
           <input
@@ -129,27 +129,31 @@ export const Player2Step = ({ playerNameHistory, onNext, onCancel, initialValue
             ))}
           </div>
         )}
+        </div>
+        {error && <div className={styles['validation-error']} style={{ marginBottom: 16 }}>{error}</div>}
       </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 }}>
-        <button
-          type="button"
-          className={styles['arrow-btn']}
-          aria-label="Zurück"
-          onClick={onCancel}
-          style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
-        >
-          &#8592;
-        </button>
-        <button
-          type="submit"
-          className={styles['arrow-btn']}
-          aria-label="Weiter"
-          disabled={!player2.trim()}
-          style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer', opacity: !player2.trim() ? 0.5 : 1 }}
-        >
-          &#8594;
-        </button>
+      
+      <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']}
+            aria-label="Zurück"
+            onClick={onCancel}
+            style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
+          >
+            &#8592;
+          </button>
+          <button
+            type="submit"
+            className={styles['arrow-btn']}
+            aria-label="Weiter"
+            disabled={!player2.trim()}
+            style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer', opacity: !player2.trim() ? 0.5 : 1 }}
+          >
+            &#8594;
+          </button>
+        </div>
       </div>
     </form>
   );
diff --git a/src/components/new-game/Player3Step.tsx b/src/components/new-game/Player3Step.tsx
index 364612b..db7e9a6 100644
--- a/src/components/new-game/Player3Step.tsx
+++ b/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,17 +54,21 @@ 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['screen-title']}>Name Spieler 3 (optional)</div>
-      <div className={styles['progress-indicator']} style={{ marginBottom: 24 }}>
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot'] + ' ' + styles['active']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
-        <span className={styles['progress-dot']} />
+      <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']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot'] + ' ' + styles['active']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+          <span className={styles['progress-dot']} />
+        </div>
       </div>
-      <div className={styles['player-input'] + ' ' + styles['player3-input']} style={{ marginBottom: 32, position: 'relative' }}>
+      
+      <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%' }}>
           <input
@@ -126,35 +126,39 @@ export const Player3Step = ({ playerNameHistory, onNext, onCancel, initialValue
             ))}
           </div>
         )}
+        </div>
       </div>
-      <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 48 }}>
-        <button
-          type="button"
-          className={styles['arrow-btn']}
-          aria-label="Zurück"
-          onClick={onCancel}
-          style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
-        >
-          &#8592;
-        </button>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+      
+      <div className={styles['form-footer']}>
+        <div className={styles['arrow-nav']} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
           <button
             type="button"
-            onClick={handleSkip}
-            className={styles['quick-pick-btn']}
-            style={{ fontSize: '1.1rem', padding: '12px 20px', borderRadius: 8, background: '#333', color: '#fff', border: 'none', cursor: 'pointer' }}
-          >
-            Überspringen
-          </button>
-          <button
-            type="submit"
             className={styles['arrow-btn']}
-            aria-label="Weiter"
-            disabled={!player3.trim()}
-            style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer', opacity: !player3.trim() ? 0.5 : 1 }}
+            aria-label="Zurück"
+            onClick={onCancel}
+            style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer' }}
           >
-            &#8594;
+            &#8592;
           </button>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+            <button
+              type="button"
+              onClick={handleSkip}
+              className={styles['quick-pick-btn']}
+              style={{ fontSize: '1.1rem', padding: '12px 20px', borderRadius: 8, background: '#333', color: '#fff', border: 'none', cursor: 'pointer' }}
+            >
+              Überspringen
+            </button>
+            <button
+              type="submit"
+              className={styles['arrow-btn']}
+              aria-label="Weiter"
+              disabled={!player3.trim()}
+              style={{ fontSize: 48, width: 80, height: 80, borderRadius: '50%', background: '#222', color: '#fff', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', cursor: 'pointer', opacity: !player3.trim() ? 0.5 : 1 }}
+            >
+              &#8594;
+            </button>
+          </div>
         </div>
       </div>
     </form>
diff --git a/src/components/screens/GameListScreen.tsx b/src/components/screens/GameListScreen.tsx
index 7e496a5..601e7b5 100644
--- a/src/components/screens/GameListScreen.tsx
+++ b/src/components/screens/GameListScreen.tsx
@@ -23,15 +23,17 @@ export default function GameListScreen({
 }: GameListScreenProps) {
   return (
     <Screen>
-      <Button
-        variant="primary"
-        size="large"
-        onClick={onShowNewGame}
-        aria-label="Neues Spiel starten"
-        style={{ width: '100%', marginBottom: '24px' }}
-      >
-        + Neues Spiel
-      </Button>
+      <div style={{ flexShrink: 0 }}>
+        <Button
+          variant="primary"
+          size="large"
+          onClick={onShowNewGame}
+          aria-label="Neues Spiel starten"
+          style={{ width: '100%', marginBottom: '24px' }}
+        >
+          + Neues Spiel
+        </Button>
+      </div>
       
       <GameList
         games={games}
diff --git a/src/components/ui/Layout.module.css b/src/components/ui/Layout.module.css
index c9c2f7d..91a984d 100644
--- a/src/components/ui/Layout.module.css
+++ b/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 */
diff --git a/src/styles/index.css b/src/styles/index.css
index db6c583..0266d0f 100644
--- a/src/styles/index.css
+++ b/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;