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.
This commit is contained in:
@@ -476,6 +476,8 @@ export default function App() {
|
||||
{/* Right of board: player rail */}
|
||||
<div className="playerRail">
|
||||
<div className="playerRailTitle">Spieler</div>
|
||||
|
||||
<div className="playerRailInner">
|
||||
<div className="playerRailList">
|
||||
{players.map((p) => (
|
||||
<PlayerIcon key={p.id} player={p} />
|
||||
@@ -483,6 +485,7 @@ export default function App() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom: Player HUD */}
|
||||
<div className="playerHud">
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user