From f282ac42fb18443adb31a14084a22ea04229f8ba Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Sat, 7 Feb 2026 12:11:14 +0100
Subject: [PATCH] Add playerRailInner wrapper and adjust CSS styling.

Introduced a `playerRailInner` div for better structural organization and improved styling flexibility. Adjusted CSS to manage overflow and improve visual cropping while maintaining a clean radius design.
---
 frontend/src/App.jsx       | 11 +++++++----
 frontend/src/AppLayout.css | 14 +++++++++++---
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index b21aec3..139b2cf 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -476,10 +476,13 @@ export default function App() {
             {/* Right of board: player rail */}
             <div className="playerRail">
               <div className="playerRailTitle">Spieler</div>
-              <div className="playerRailList">
-                {players.map((p) => (
-                  <PlayerIcon key={p.id} player={p} />
-                ))}
+
+              <div className="playerRailInner">
+                <div className="playerRailList">
+                  {players.map((p) => (
+                    <PlayerIcon key={p.id} player={p} />
+                  ))}
+                </div>
               </div>
             </div>
           </div>
diff --git a/frontend/src/AppLayout.css b/frontend/src/AppLayout.css
index fd4c1ff..8565a7c 100644
--- a/frontend/src/AppLayout.css
+++ b/frontend/src/AppLayout.css
@@ -88,20 +88,28 @@ body {
 /* 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;
   gap: 10px;
+
+  overflow: visible; /* 🔥 wichtig */
+}
+
+.playerRailInner {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;        /* hier wird wieder sauber gecropped */
+  border-radius: 18px;     /* etwas kleiner als außen */
+  display: grid;
+  justify-items: center;
 }
 
 .playerRailTitle {