From 310cc0e2ec8ca05b6196b40c11423301d0db631f Mon Sep 17 00:00:00 2001
From: beo3000 <pakabu@web.de>
Date: Fri, 9 Jan 2026 10:59:15 +0100
Subject: [PATCH] layout optimization for tablets

---
 .../Components/Game/GameInputPanel.razor      | 143 +++++++++++-------
 1 file changed, 91 insertions(+), 52 deletions(-)

diff --git a/src/Koogle.Web/Components/Game/GameInputPanel.razor b/src/Koogle.Web/Components/Game/GameInputPanel.razor
index d16e414..8606ea6 100644
--- a/src/Koogle.Web/Components/Game/GameInputPanel.razor
+++ b/src/Koogle.Web/Components/Game/GameInputPanel.razor
@@ -14,72 +14,77 @@
 @GameState.Value.ThrowPanelBefore *@
 
 <div class="game-input-panel">
-    @* Current player display *@
-    <div class="current-player-section">
-        <MudText Typo="Typo.h6" Class="player-label">Aktueller Spieler</MudText>
-        <MudText Typo="Typo.h4" Class="player-name">
-            @(CurrentPlayerName ?? "Kein Spieler")
-        </MudText>
-        @if (GameState.Value.Participants.Mode == ParticipantsMode.FreeToChoose)
+    @* Left column: Player + Pins *@
+    <div class="left-column">
+        @* Current player display *@
+        <div class="current-player-section">
+            <MudText Typo="Typo.h6" Class="player-label">Aktueller Spieler</MudText>
+            <MudText Typo="Typo.h4" Class="player-name">
+                @(CurrentPlayerName ?? "Kein Spieler")
+            </MudText>
+            @if (GameState.Value.Participants.Mode == ParticipantsMode.FreeToChoose)
+            {
+                <MudButton Variant="Variant.Outlined"
+                           Color="Color.Warning"
+                           Size="Size.Small"
+                           OnClick="ShowPlayerSelector"
+                           StartIcon="@Icons.Material.Filled.SwapHoriz">
+                    Spieler wechseln
+                </MudButton>
+            }
+        </div>
+
+        @* Pin input area *@
+        <div class="pin-input-section">
+            <PinPanel ThrowPanelState="@GameState.Value.ThrowPanelAfter"
+                      IsInteractive="@IsInteractive"
+                      OnPinClicked="HandlePinClick" />
+        </div>
+
+        @* Number quick-entry (below pins) *@
+        @if (@GameState.Value.ThrowPanelAfter.ThrowMode == ThrowMode.Reposition)
         {
-            <MudButton Variant="Variant.Outlined"
-                       Color="Color.Warning"
-                       Size="Size.Small"
-                       OnClick="ShowPlayerSelector"
-                       StartIcon="@Icons.Material.Filled.SwapHoriz">
-                Spieler wechseln
-            </MudButton>
+            <div class="number-input-section">
+                <NumberPanel IsInteractive="@IsInteractive"
+                             CanConfirmThrow="@CanConfirmThrow"
+                             SelectedNumber="@_selectedNumber"
+                             OnNumberClicked="HandleNumberClick" />
+            </div>
         }
     </div>
 
-    @* Pin input area *@
-    <div class="pin-input-section">
-        <PinPanel ThrowPanelState="@GameState.Value.ThrowPanelAfter"
-                  IsInteractive="@IsInteractive"
-                  OnPinClicked="HandlePinClick" />
-    </div>
+    @* Right column: Controls *@
+    <div class="right-column">
+        <ConfirmPanel IsInteractive="@IsInteractive"
+                      CanConfirmThrow="@CanConfirmThrow"
+                      OnBellClicked="HandleBellClick"
+                      OnThrowConfirmed="HandleThrowConfirmed"/>
 
-    
-    @if (@GameState.Value.ThrowPanelAfter.ThrowMode == ThrowMode.Reposition)
-    {
-        @* Number quick-entry *@
-        <div class="number-input-section">
-            <NumberPanel IsInteractive="@IsInteractive"
-                         CanConfirmThrow="@CanConfirmThrow"
-                         SelectedNumber="@_selectedNumber"
-                         OnNumberClicked="HandleNumberClick" />
+        @* Throw info and controls *@
+        <div class="throw-control-section">
+            <ThrowPanel ThrowPanelState="@GameState.Value.ThrowPanelAfter"
+                        IsInteractive="@IsInteractive"
+                        OnGutterClicked="HandleGutterClick" />
         </div>
-    }
-    
-    <ConfirmPanel IsInteractive="@IsInteractive"
-                  CanConfirmThrow="@CanConfirmThrow"
-        OnBellClicked="HandleBellClick"
-                  OnThrowConfirmed="HandleThrowConfirmed"/>
 
-    @* Throw info and controls *@
-    <div class="throw-control-section">
-        <ThrowPanel ThrowPanelState="@GameState.Value.ThrowPanelAfter"
-                    IsInteractive="@IsInteractive"
-                    OnGutterClicked="HandleGutterClick" />
+        @* Undo/Redo buttons *@
+        <div class="undo-section">
+            <UndoRedoButtons IsDisabled="@GameState.Value.IsSaving" />
+        </div>
+
+        @* Game-specific actions *@
+        <GameActionPanel />
     </div>
 
-    @* Undo/Redo buttons *@
-    <div class="undo-section">
-        <UndoRedoButtons IsDisabled="@GameState.Value.IsSaving" />
-    </div>
-
-    @* Game-specific actions *@
-    <GameActionPanel />
-
-    @* Error display *@
+    @* Error display (full width) *@
     @if (!string.IsNullOrEmpty(GameState.Value.Error))
     {
-        <MudAlert Severity="Severity.Error" Class="mt-2">
+        <MudAlert Severity="Severity.Error" Class="mt-2 error-section">
             @GameState.Value.Error
         </MudAlert>
     }
 
-    @* Saving indicator *@
+    @* Saving indicator (full width) *@
     @if (GameState.Value.IsSaving)
     {
         <div class="saving-indicator">
@@ -95,10 +100,44 @@
         flex-direction: column;
         gap: 16px;
         padding: 16px;
-        max-width: 500px;
+        max-width: 900px;
         margin: 0 auto;
     }
 
+    .left-column {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .right-column {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    /* Tablet and larger: two-column layout */
+    @@media (min-width: 768px) {
+        .game-input-panel {
+            display: grid;
+            grid-template-columns: minmax(300px, 1fr) minmax(280px, 1fr);
+            gap: 24px;
+            align-items: start;
+        }
+
+        .error-section,
+        .saving-indicator {
+            grid-column: 1 / -1;
+        }
+    }
+
+    /* Mobile: stack everything vertically */
+    @@media (max-width: 767px) {
+        .game-input-panel {
+            max-width: 500px;
+        }
+    }
+
     .current-player-section {
         text-align: center;
         padding: 16px;