Fix overflow and stacking issues in App rendering

Refactored overflow behavior to allow specific components to stack or clip as needed, improving rendering flexibility. Updated styles and fixed z-index issues for cleaner stacking contexts. Removed unused comments for better code readability.

frontend/src/App.jsx

@@ -1,3 +1,4 @@
+// frontend/src/App.jsx
 import React, { useEffect, useRef, useState } from "react";
 
 import { api } from "./api/client";
@@ -241,6 +242,7 @@ export default function App() {
     variant = "tile",
     icon = null,
     children = null,
+    overflow = "hidden", // ✅ FIX: allow some tiles to not clip neighbors
   }) => {
     const v = variant;
 
@@ -256,7 +258,7 @@ export default function App() {
       boxShadow: v === "panel" ? "0 20px 70px rgba(0,0,0,0.45)" : "0 12px 30px rgba(0,0,0,0.35)",
       backdropFilter: "blur(10px)",
       padding: pad,
-      overflow: "hidden",
+      overflow, // ✅ FIX: default hidden, but can be visible where needed
       minWidth: 0,
       position: "relative",
     };
@@ -292,16 +294,17 @@ export default function App() {
       opacity: 0.75,
     };
 
-    const glowLine = v === "panel"
+    const glowLine =
-      ? {
+      v === "panel"
-          content: '""',
+        ? {
-          position: "absolute",
+            content: '""',
-          inset: 0,
+            position: "absolute",
-          background: `linear-gradient(90deg, transparent, ${stylesTokens.goldLine}, transparent)`,
+            inset: 0,
-          opacity: 0.18,
+            background: `linear-gradient(90deg, transparent, ${stylesTokens.goldLine}, transparent)`,
-          pointerEvents: "none",
+            opacity: 0.18,
-        }
+            pointerEvents: "none",
-      : null;
+          }
+        : null;
 
     return (
       <div style={base}>
@@ -424,306 +427,295 @@ export default function App() {
   };
 
   const HogwartsPointsCard = ({ value = 0 }) => {
-  const GOLD = "#f2d27a";
+    const GOLD = "#f2d27a";
 
-  return (
+    return (
-    <div
-      style={{
-        height: "100%",
-        minHeight: 0,
-        minWidth: 0,
-        background: "transparent",
-        border: "none",
-        boxShadow: "none",
-        display: "grid",
-        alignItems: "center",     // ✅ dünnes Paper in der HUD-Zelle schön mittig
-        justifyItems: "stretch",
-        padding: 0,
-      }}
-    >
-      {/* Dünnes Pergament */}
-      <div
-        style={{
-          height: 96,             // ✅ "dünn" (kannst du 80–96 spielen)
-          width: "90%",
-          borderRadius: 16,
-          background: `
-            radial-gradient(140% 160% at 15% 10%, rgba(235,215,175,0.88), rgba(215,185,135,0.82) 55%, rgba(165,125,75,0.75)),
-            radial-gradient(120% 120% at 85% 85%, rgba(255,255,255,0.10), transparent 60%),
-            linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.26))
-          `,
-          boxShadow:
-            "inset 0 0 0 1px rgba(0,0,0,0.20), inset 0 18px 40px rgba(0,0,0,0.18), 0 16px 40px rgba(0,0,0,0.40)",
-          position: "relative",
-          overflow: "hidden",
-          display: "grid",
-          placeItems: "center",
-          padding: "14px 16px",
-        }}
-      >
-        {/* Papier-Flecken */}
-        <div
-          style={{
-            position: "absolute",
-            inset: 0,
-            background: `
-              radial-gradient(circle at 22% 36%, rgba(90,60,25,0.14), transparent 42%),
-              radial-gradient(circle at 70% 30%, rgba(90,60,25,0.10), transparent 38%),
-              radial-gradient(circle at 58% 76%, rgba(255,255,255,0.08), transparent 46%)
-            `,
-            opacity: 0.65,
-            pointerEvents: "none",
-          }}
-        />
-
-        {/* Innere Goldlinie */}
-        <div
-          style={{
-            position: "absolute",
-            inset: 10,
-            borderRadius: 12,
-            border: "1px solid rgba(202,162,74,0.40)",
-            boxShadow: "inset 0 0 0 1px rgba(242,210,122,0.14)",
-            pointerEvents: "none",
-          }}
-        />
-
-        {/* Wert */}
-        <div style={{ display: "flex", alignItems: "baseline", gap: 10, position: "relative" }}>
-          <div
-            style={{
-              color: GOLD,
-              fontWeight: 900,
-              fontSize: 44,
-              letterSpacing: 0.6,
-              lineHeight: 1,
-              textShadow: "0 1px 0 rgba(0,0,0,0.38), 0 0 20px rgba(242,210,122,0.28)",
-            }}
-          >
-            {value}
-          </div>
-
-          <div
-            style={{
-              color: GOLD,
-              fontWeight: 900,
-              fontSize: 18,
-              letterSpacing: 1.4,
-              transform: "translateY(-6px)",
-              textShadow: "0 1px 0 rgba(0,0,0,0.32), 0 0 14px rgba(242,210,122,0.22)",
-              opacity: 0.95,
-            }}
-          >
-            HP
-          </div>
-        </div>
-
-        {/* Siegel */}
-        <div
-          style={{
-            position: "absolute",
-            bottom: 10,
-            right: 12,
-            color: "rgba(60,40,18,0.55)",
-            fontSize: 11,
-            fontWeight: 900,
-            letterSpacing: 1.6,
-            textTransform: "uppercase",
-            transform: "rotate(-6deg)",
-            border: "1px solid rgba(60,40,18,0.25)",
-            borderRadius: 999,
-            padding: "3px 8px",
-            background: "rgba(255,255,255,0.10)",
-          }}
-        >
-          SCORE
-        </div>
-      </div>
-    </div>
-  );
-};
-
-  const PlayerIdentityCard = ({
-  name = "Harry Potter",
-  houseLabel = "Gryffindor",
-  borderColor = "#7c4dff",
-  img = "/player_cards/harry.png",
-}) => {
-  return (
-    <div
-      style={{
-        height: "100%",
-        minHeight: 0,
-        minWidth: 0,
-        display: "grid",
-        alignItems: "center",
-        overflow: "visible",
-      }}
-    >
-      {/* Slot-Container: bleibt ruhig, Karte darf drüber schauen */}
       <div
         style={{
           height: "100%",
           minHeight: 0,
           minWidth: 0,
-          borderRadius: 18,
-          border: "none",
           background: "transparent",
-          backdropFilter: "none",
+          border: "none",
           boxShadow: "none",
-          padding: 12,
-          overflow: "visible", // ✅ Karte darf raus ragen
-          position: "relative",
           display: "grid",
           alignItems: "center",
-          justifyItems: "start",
+          justifyItems: "stretch",
+          padding: 0,
         }}
       >
-        {/* Die Karte selbst (kleiner als Container) */}
         <div
           style={{
-            width: "48%",              // ✅ nicht volle Breite
+            height: 96,
-            zIndex: 50,
+            width: "90%",
-            maxWidth: 220,
-            aspectRatio: "63 / 88",    // typisch Kartenformat
             borderRadius: 16,
-            border: `2px solid ${borderColor}`,
+            background: `
-            boxShadow: `0 18px 55px rgba(0,0,0,0.55), 0 0 26px rgba(124,77,255,0.22)`,
+              radial-gradient(140% 160% at 15% 10%, rgba(235,215,175,0.88), rgba(215,185,135,0.82) 55%, rgba(165,125,75,0.75)),
-            overflow: "visible",
+              radial-gradient(120% 120% at 85% 85%, rgba(255,255,255,0.10), transparent 60%),
+              linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.26))
+            `,
+            boxShadow:
+              "inset 0 0 0 1px rgba(0,0,0,0.20), inset 0 18px 40px rgba(0,0,0,0.18), 0 16px 40px rgba(0,0,0,0.40)",
             position: "relative",
-            background: "rgba(0,0,0,0.15)",
+            overflow: "hidden",
-            transform: "translateY(-10px) rotate(-0.6deg)", // ✅ schaut leicht raus
+            display: "grid",
-            transformOrigin: "center bottom",
+            placeItems: "center",
-            transition: "transform 180ms ease, box-shadow 180ms ease",
+            padding: "14px 16px",
-            cursor: "pointer",
-            marginLeft: 20,
-          }}
-          onMouseMove={(e) => {
-            // einfacher Tilt ohne extra libs
-            const rect = e.currentTarget.getBoundingClientRect();
-            const x = (e.clientX - rect.left) / rect.width;  // 0..1
-            const y = (e.clientY - rect.top) / rect.height;  // 0..1
-            const rx = (0.5 - y) * 6; // tilt range
-            const ry = (x - 0.5) * 8;
-
-            e.currentTarget.style.transform = `translateY(-16px) rotate(-0.6deg) perspective(700px) rotateX(${rx}deg) rotateY(${ry}deg)`;
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.transform = "translateY(-10px) rotate(-0.6deg)";
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.transform = "translateY(-18px) rotate(-0.6deg)";
-            e.currentTarget.style.boxShadow = `0 26px 70px rgba(0,0,0,0.62), 0 0 34px ${borderColor}`;
           }}
         >
-          {/* Image */}
-          <img
-            src={img}
-            alt={name}
-            draggable={false}
-            style={{
-              width: "100%",
-              height: "100%",
-              objectFit: "cover",
-              transform: "scale(1.02)",
-              filter: "contrast(1.02) saturate(1.06)",
-              display: "block",
-              overflow: "visble",
-            }}
-          />
-
-          {/* Gloss */}
           <div
             style={{
               position: "absolute",
               inset: 0,
-              background:
+              background: `
-                "linear-gradient(120deg, rgba(255,255,255,0.10) 0%, transparent 35%, transparent 70%, rgba(255,255,255,0.06) 100%)",
+                radial-gradient(circle at 22% 36%, rgba(90,60,25,0.14), transparent 42%),
+                radial-gradient(circle at 70% 30%, rgba(90,60,25,0.10), transparent 38%),
+                radial-gradient(circle at 58% 76%, rgba(255,255,255,0.08), transparent 46%)
+              `,
+              opacity: 0.65,
               pointerEvents: "none",
-              opacity: 0.7,
             }}
           />
 
-          {/* Bottom label glass */}
           <div
             style={{
               position: "absolute",
-              left: 10,
+              inset: 10,
-              right: 10,
-              bottom: 10,
               borderRadius: 12,
-              background: "rgba(0,0,0,0.45)",
+              border: "1px solid rgba(202,162,74,0.40)",
-              border: "1px solid rgba(255,255,255,0.10)",
+              boxShadow: "inset 0 0 0 1px rgba(242,210,122,0.14)",
-              backdropFilter: "blur(6px)",
+              pointerEvents: "none",
-              padding: "10px 12px",
-              display: "grid",
-              gap: 4,
             }}
-          >
+          />
+
+          <div style={{ display: "flex", alignItems: "baseline", gap: 10, position: "relative" }}>
             <div
               style={{
-                color: stylesTokens.textMain,
+                color: GOLD,
                 fontWeight: 900,
-                fontSize: 14,
+                fontSize: 44,
-                letterSpacing: 0.2,
+                letterSpacing: 0.6,
-                lineHeight: 1.1,
+                lineHeight: 1,
-                textShadow: "0 10px 30px rgba(0,0,0,0.55)",
+                textShadow: "0 1px 0 rgba(0,0,0,0.38), 0 0 20px rgba(242,210,122,0.28)",
               }}
             >
-              {name}
+              {value}
             </div>
 
             <div
               style={{
-                color: stylesTokens.textDim,
+                color: GOLD,
-                fontSize: 11.5,
+                fontWeight: 900,
-                opacity: 0.92,
+                fontSize: 18,
-                display: "flex",
+                letterSpacing: 1.4,
-                alignItems: "center",
+                transform: "translateY(-6px)",
-                gap: 8,
+                textShadow: "0 1px 0 rgba(0,0,0,0.32), 0 0 14px rgba(242,210,122,0.22)",
+                opacity: 0.95,
               }}
             >
-              <span
+              HP
-                style={{
-                  width: 8,
-                  height: 8,
-                  borderRadius: 999,
-                  background: borderColor,
-                  boxShadow: `0 0 16px ${borderColor}`,
-                  opacity: 0.9,
-                }}
-              />
-              {houseLabel}
             </div>
           </div>
 
-          {/* Corner tag */}
           <div
             style={{
               position: "absolute",
-              top: 10,
+              bottom: 10,
-              right: 10,
+              right: 12,
-              fontSize: 10.5,
+              color: "rgba(60,40,18,0.55)",
+              fontSize: 11,
               fontWeight: 900,
-              letterSpacing: 1.2,
+              letterSpacing: 1.6,
-              padding: "4px 8px",
-              borderRadius: 999,
-              color: "rgba(255,255,255,0.75)",
-              border: "1px solid rgba(255,255,255,0.14)",
-              background: "rgba(0,0,0,0.28)",
-              backdropFilter: "blur(6px)",
               textTransform: "uppercase",
+              transform: "rotate(-6deg)",
+              border: "1px solid rgba(60,40,18,0.25)",
+              borderRadius: 999,
+              padding: "3px 8px",
+              background: "rgba(255,255,255,0.10)",
             }}
           >
-            Identity
+            SCORE
           </div>
         </div>
       </div>
-    </div>
+    );
-  );
+  };
-};
 
+  const PlayerIdentityCard = ({
+    name = "Harry Potter",
+    houseLabel = "Gryffindor",
+    borderColor = "#7c4dff",
+    img = "/player_cards/harry.png",
+  }) => {
+    return (
+      <div
+        style={{
+          height: "100%",
+          minHeight: 0,
+          minWidth: 0,
+          display: "grid",
+          alignItems: "center",
+          overflow: "visible",
+          position: "relative", // ✅ FIX: enable clean stacking context
+          zIndex: 5, // ✅ FIX: sit above neighbors
+        }}
+      >
+        <div
+          style={{
+            height: "100%",
+            minHeight: 0,
+            minWidth: 0,
+            borderRadius: 18,
+            border: "none",
+            background: "transparent",
+            backdropFilter: "none",
+            boxShadow: "none",
+            padding: 12,
+            overflow: "visible",
+            position: "relative",
+            zIndex: 5, // ✅ FIX
+            display: "grid",
+            alignItems: "center",
+            justifyItems: "start",
+          }}
+        >
+          <div
+            style={{
+              width: "48%",
+              maxWidth: 220,
+              aspectRatio: "63 / 88",
+              borderRadius: 16,
+              border: `2px solid ${borderColor}`,
+              boxShadow: `0 18px 55px rgba(0,0,0,0.55), 0 0 26px rgba(124,77,255,0.22)`,
+              overflow: "hidden", // ✅ important: crop image to rounded corners
+              position: "relative",
+              background: "rgba(0,0,0,0.15)",
+              transform: "translateY(-10px) rotate(-0.6deg)",
+              transformOrigin: "center bottom",
+              transition: "transform 180ms ease, box-shadow 180ms ease",
+              cursor: "pointer",
+              marginLeft: 20,
+              zIndex: 50, // ✅ keep above other tiles
+            }}
+            onMouseMove={(e) => {
+              const rect = e.currentTarget.getBoundingClientRect();
+              const x = (e.clientX - rect.left) / rect.width;
+              const y = (e.clientY - rect.top) / rect.height;
+              const rx = (0.5 - y) * 6;
+              const ry = (x - 0.5) * 8;
 
+              e.currentTarget.style.transform = `translateY(-16px) rotate(-0.6deg) perspective(700px) rotateX(${rx}deg) rotateY(${ry}deg)`;
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.transform = "translateY(-10px) rotate(-0.6deg)";
+              e.currentTarget.style.boxShadow = `0 18px 55px rgba(0,0,0,0.55), 0 0 26px rgba(124,77,255,0.22)`;
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.transform = "translateY(-18px) rotate(-0.6deg)";
+              e.currentTarget.style.boxShadow = `0 26px 70px rgba(0,0,0,0.62), 0 0 34px ${borderColor}`;
+            }}
+          >
+            <img
+              src={img}
+              alt={name}
+              draggable={false}
+              style={{
+                width: "100%",
+                height: "100%",
+                objectFit: "cover",
+                transform: "scale(1.02)",
+                filter: "contrast(1.02) saturate(1.06)",
+                display: "block",
+              }}
+            />
+
+            <div
+              style={{
+                position: "absolute",
+                inset: 0,
+                background:
+                  "linear-gradient(120deg, rgba(255,255,255,0.10) 0%, transparent 35%, transparent 70%, rgba(255,255,255,0.06) 100%)",
+                pointerEvents: "none",
+                opacity: 0.7,
+              }}
+            />
+
+            <div
+              style={{
+                position: "absolute",
+                left: 10,
+                right: 10,
+                bottom: 10,
+                borderRadius: 12,
+                background: "rgba(0,0,0,0.45)",
+                border: "1px solid rgba(255,255,255,0.10)",
+                backdropFilter: "blur(6px)",
+                padding: "10px 12px",
+                display: "grid",
+                gap: 4,
+              }}
+            >
+              <div
+                style={{
+                  color: stylesTokens.textMain,
+                  fontWeight: 900,
+                  fontSize: 14,
+                  letterSpacing: 0.2,
+                  lineHeight: 1.1,
+                  textShadow: "0 10px 30px rgba(0,0,0,0.55)",
+                }}
+              >
+                {name}
+              </div>
+
+              <div
+                style={{
+                  color: stylesTokens.textDim,
+                  fontSize: 11.5,
+                  opacity: 0.92,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                }}
+              >
+                <span
+                  style={{
+                    width: 8,
+                    height: 8,
+                    borderRadius: 999,
+                    background: borderColor,
+                    boxShadow: `0 0 16px ${borderColor}`,
+                    opacity: 0.9,
+                  }}
+                />
+                {houseLabel}
+              </div>
+            </div>
+
+            <div
+              style={{
+                position: "absolute",
+                top: 10,
+                right: 10,
+                fontSize: 10.5,
+                fontWeight: 900,
+                letterSpacing: 1.2,
+                padding: "4px 8px",
+                borderRadius: 999,
+                color: "rgba(255,255,255,0.75)",
+                border: "1px solid rgba(255,255,255,0.14)",
+                background: "rgba(0,0,0,0.28)",
+                backdropFilter: "blur(6px)",
+                textTransform: "uppercase",
+              }}
+            >
+              Identity
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
 
   return (
     <div style={styles.page}>
@@ -757,7 +749,6 @@ export default function App() {
                 subtitle="Platzhalter – hier kommt später das Board + Figuren rein."
                 variant="panel"
               >
-                {/* 👇 DAS ist neu */}
                 <div
                   style={{
                     flex: 1,
@@ -769,7 +760,6 @@ export default function App() {
                 />
               </PlaceholderCard>
 
-              {/* Dice overlay bleibt gleich */}
               <div className="diceOverlay">
                 <PlaceholderCard title="Würfel" variant="compact" />
               </div>
@@ -799,8 +789,9 @@ export default function App() {
             />
 
             <div className="playerHudMiddle">
-              <PlaceholderCard title="Meine Geheimkarten" variant="tile" />
+              {/* ✅ FIX: these were clipping your hovering/overlapping player card */}
-              <PlaceholderCard title="Meine Hilfkarte(n)" variant="tile" />
+              <PlaceholderCard title="Meine Geheimkarten" variant="tile" overflow="visible" />
+              <PlaceholderCard title="Meine Hilfkarte(n)" variant="tile" overflow="visible" />
             </div>
 
             <HogwartsPointsCard value={60} />
@@ -820,9 +811,7 @@ export default function App() {
           }}
         >
           <div>
-            <div style={{ fontWeight: 900, color: stylesTokens.textMain, fontSize: 14 }}>
+            <div style={{ fontWeight: 900, color: stylesTokens.textMain, fontSize: 14 }}>Notizen</div>
-              Notizen
-            </div>
             <div style={{ marginTop: 6, color: stylesTokens.textDim, fontSize: 12 }}>
               Nur die 3 Tabellen (Verdächtige / Gegenstände / Orte).
             </div>
@@ -846,11 +835,7 @@ export default function App() {
         </aside>
       </div>
 
-      <ChipModal
+      <ChipModal chipOpen={chipOpen} closeChipModalToDash={closeChipModalToDash} chooseChip={chooseChip} />
-        chipOpen={chipOpen}
-        closeChipModalToDash={closeChipModalToDash}
-        chooseChip={chooseChip}
-      />
     </div>
   );
 }

frontend/src/AppLayout.css

@@ -1,3 +1,4 @@
+/* frontend/src/AppLayout.css */
 html, body, #root {
   height: 100%;
 }
@@ -100,14 +101,14 @@ body {
   justify-items: center;
   gap: 10px;
 
-  overflow: visible; /* 🔥 wichtig */
+  overflow: visible;
 }
 
 .playerRailInner {
   width: 100%;
   height: 100%;
-  overflow: visible;        /* hier wird wieder sauber gecropped */
+  overflow: visible;
-  border-radius: 18px;     /* etwas kleiner als außen */
+  border-radius: 18px;
   display: grid;
   justify-items: center;
 }