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
parent 65aaa92359
commit 076d6ced36
14 changed files with 247 additions and 153 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,8 @@ pnpm-debug.log*

 .gitea
 dev/.gitea
+
+# Playwright test artifacts
+playwright-report/
+test-results/
+playwright/.cache/
--- 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.
--- 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 */
--- 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;
--- 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 */
--- 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>
  );
 }
--- 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;
--- 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>
  );
--- 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>
  );
 };
--- 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>
  );
--- 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>
--- 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}
--- 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 */
--- 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;