[Message]

Refine layout and responsiveness in AppLayout.css

Updated grid settings for better flexibility and spacing across various screen sizes. Adjusted dimensions, padding, and responsive breakpoints to enhance layout appearance and usability, especially for smaller screens. Added minor styling tweaks for improved aesthetics and consistency.

frontend/src/AppLayout.css

@@ -1,20 +1,18 @@
-/* Desktop-only layout:
-   - Left: fixed, no scroll
-   - Right: notes scroll only
-*/
-
 html, body, #root {
   height: 100%;
 }
 
 body {
-  overflow: hidden; /* prevent global scroll */
+  overflow: hidden;
 }
 
 .appRoot {
   height: 100vh;
   display: grid;
-  grid-template-columns: minmax(860px, 1fr) clamp(380px, 32vw, 520px);
+
+  /* Links: flexibel | Rechts: Notes clamp */
+  grid-template-columns: minmax(900px, 1fr) clamp(380px, 32vw, 520px);
+
   gap: 14px;
   padding: 14px;
   box-sizing: border-box;
@@ -26,28 +24,34 @@ body {
   overflow: hidden;
   min-width: 0;
   display: grid;
-  grid-template-rows: 72px minmax(340px, 1fr) 160px; /* top | main | player HUD */
+
+  /* Top | Main | HUD */
+  grid-template-rows: 68px minmax(360px, 1fr) 170px;
+
   gap: 14px;
 }
 
 .topBarRow {
   display: grid;
-  grid-template-columns: 1fr 1fr; /* User | Settings adjacent */
+  grid-template-columns: 1fr 1fr;
   gap: 14px;
   min-width: 0;
 }
 
-/* MIDDLE: Tools | Board | Player rail */
+/* MAIN: Tools | Board | PlayerRail */
 .mainRow {
   min-height: 0;
   overflow: hidden;
   display: grid;
-  grid-template-columns: minmax(220px, 300px) minmax(520px, 1fr) 92px;
+
+  /* Tools bewusst schmaler, Board bekommt Bühne */
+  grid-template-columns: 260px minmax(560px, 1fr) 92px;
+
   gap: 14px;
   min-width: 0;
 }
 
-/* Left of board: stack cards vertically (Hilfskarten deck over Dunkles Deck) */
+/* Tools left of board */
 .leftTools {
   min-width: 0;
   overflow: hidden;
@@ -57,7 +61,7 @@ body {
 
 .leftToolsRow {
   display: grid;
-  grid-template-columns: 1fr; /* vertical */
+  grid-template-columns: 1fr;
   gap: 14px;
   min-width: 0;
 }
@@ -78,19 +82,22 @@ body {
   right: 18px;
   width: 220px;
   pointer-events: none;
-  opacity: 0.95;
+  opacity: 0.98;
 }
 
-/* Player rail: right of board, before notes */
+/* Player rail: right of board, before notes (tight) */
 .playerRail {
   min-height: 0;
   overflow: hidden;
   border-radius: 22px;
+
   border: 1px solid rgba(255,255,255,0.08);
   background: rgba(0,0,0,0.18);
   backdrop-filter: blur(10px);
   box-shadow: 0 16px 50px rgba(0,0,0,0.35);
+
   padding: 10px 8px;
+
   display: grid;
   grid-template-rows: auto 1fr;
   justify-items: center;
@@ -113,23 +120,25 @@ body {
   padding-top: 4px;
 }
 
-/* Bottom: Player HUD (User | (Secret + My Help) | Points) */
+/* HUD */
 .playerHud {
   min-height: 0;
   overflow: hidden;
   display: grid;
-  grid-template-columns: 1.1fr 1.6fr 1.1fr;
+  grid-template-columns: 1.1fr 1.7fr 1.1fr;
   gap: 14px;
   min-width: 0;
 }
 
-/* Middle cell becomes a 2-column grid */
 .playerHudMiddle {
   min-width: 0;
   min-height: 0;
   overflow: hidden;
   display: grid;
-  grid-template-columns: 1fr 0.8fr; /* Geheimkarten | Meine Hilfkarte(n) */
+
+  /* Geheimkarten groß, Hilfkarte etwas kleiner */
+  grid-template-columns: 1fr 0.78fr;
+
   gap: 14px;
 }
 
@@ -148,10 +157,10 @@ body {
   padding-right: 4px;
 }
 
-/* graceful shrink */
+/* --- Responsive: shrink gracefully (no scroll outside notes) --- */
 @media (max-height: 860px) {
   .leftPane {
-    grid-template-rows: 64px minmax(280px, 1fr) 140px;
+    grid-template-rows: 64px minmax(300px, 1fr) 150px;
   }
   .diceOverlay {
     bottom: 10px;
@@ -160,20 +169,27 @@ body {
   }
 }
 
-@media (max-width: 1400px) {
+@media (max-width: 1440px) {
   .appRoot {
-    grid-template-columns: minmax(760px, 1fr) clamp(360px, 34vw, 480px);
+    grid-template-columns: minmax(820px, 1fr) clamp(360px, 34vw, 480px);
   }
   .mainRow {
-    grid-template-columns: minmax(210px, 280px) minmax(480px, 1fr) 88px;
+    grid-template-columns: 240px minmax(520px, 1fr) 88px;
   }
 }
 
-@media (max-width: 1220px) {
+@media (max-width: 1280px) {
   .appRoot {
     grid-template-columns: 1fr clamp(340px, 36vw, 460px);
   }
   .mainRow {
-    grid-template-columns: minmax(200px, 260px) minmax(420px, 1fr) 84px;
+    grid-template-columns: 220px minmax(480px, 1fr) 84px;
+  }
+}
+
+@media (max-width: 1180px) {
+  /* ab hier wird’s eng: tools noch schmäler */
+  .mainRow {
+    grid-template-columns: 200px minmax(440px, 1fr) 82px;
   }
 }