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.
2026-02-07 18:51:32 +01:00
parent 1e60656eac
commit b6e75cedc4
2 changed files with 255 additions and 269 deletions
--- a/frontend/src/App.jsx
+++ b/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,7 +294,8 @@ export default function App() {
      opacity: 0.75,
    };

-    const glowLine = v === "panel"
+    const glowLine =
+      v === "panel"
        ? {
            content: '""',
            position: "absolute",
@@ -436,15 +439,14 @@ export default function App() {
          border: "none",
          boxShadow: "none",
          display: "grid",
-        alignItems: "center",     // ✅ dünnes Paper in der HUD-Zelle schön mittig
+          alignItems: "center",
          justifyItems: "stretch",
          padding: 0,
        }}
      >
-      {/* Dünnes Pergament */}
        <div
          style={{
-          height: 96,             // ✅ "dünn" (kannst du 80–96 spielen)
+            height: 96,
            width: "90%",
            borderRadius: 16,
            background: `
@@ -461,7 +463,6 @@ export default function App() {
            padding: "14px 16px",
          }}
        >
-        {/* Papier-Flecken */}
          <div
            style={{
              position: "absolute",
@@ -476,7 +477,6 @@ export default function App() {
            }}
          />

-        {/* Innere Goldlinie */}
          <div
            style={{
              position: "absolute",
@@ -488,7 +488,6 @@ export default function App() {
            }}
          />

-        {/* Wert */}
          <div style={{ display: "flex", alignItems: "baseline", gap: 10, position: "relative" }}>
            <div
              style={{
@@ -518,7 +517,6 @@ export default function App() {
            </div>
          </div>

-        {/* Siegel */}
          <div
            style={{
              position: "absolute",
@@ -541,14 +539,14 @@ export default function App() {
        </div>
      </div>
    );
-};
+  };

  const PlayerIdentityCard = ({
    name = "Harry Potter",
    houseLabel = "Gryffindor",
    borderColor = "#7c4dff",
    img = "/player_cards/harry.png",
-}) => {
+  }) => {
    return (
      <div
        style={{
@@ -558,9 +556,10 @@ export default function App() {
          display: "grid",
          alignItems: "center",
          overflow: "visible",
+          position: "relative", // ✅ FIX: enable clean stacking context
+          zIndex: 5, // ✅ FIX: sit above neighbors
        }}
      >
-      {/* Slot-Container: bleibt ruhig, Karte darf drüber schauen */}
        <div
          style={{
            height: "100%",
@@ -572,51 +571,50 @@ export default function App() {
            backdropFilter: "none",
            boxShadow: "none",
            padding: 12,
-          overflow: "visible", // ✅ Karte darf raus ragen
+            overflow: "visible",
            position: "relative",
+            zIndex: 5, // ✅ FIX
            display: "grid",
            alignItems: "center",
            justifyItems: "start",
          }}
        >
-        {/* Die Karte selbst (kleiner als Container) */}
          <div
            style={{
-            width: "48%",              // ✅ nicht volle Breite
-            zIndex: 50,
+              width: "48%",
              maxWidth: 220,
-            aspectRatio: "63 / 88",    // typisch Kartenformat
+              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: "visible",
+              overflow: "hidden", // ✅ important: crop image to rounded corners
              position: "relative",
              background: "rgba(0,0,0,0.15)",
-            transform: "translateY(-10px) rotate(-0.6deg)", // ✅ schaut leicht raus
+              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) => {
-            // 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 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}`;
            }}
          >
-          {/* Image */}
            <img
              src={img}
              alt={name}
@@ -628,11 +626,9 @@ export default function App() {
                transform: "scale(1.02)",
                filter: "contrast(1.02) saturate(1.06)",
                display: "block",
-              overflow: "visble",
              }}
            />

-          {/* Gloss */}
            <div
              style={{
                position: "absolute",
@@ -644,7 +640,6 @@ export default function App() {
              }}
            />

-          {/* Bottom label glass */}
            <div
              style={{
                position: "absolute",
@@ -697,7 +692,6 @@ export default function App() {
              </div>
            </div>

-          {/* Corner tag */}
            <div
              style={{
                position: "absolute",
@@ -721,9 +715,7 @@ export default function App() {
        </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" />
-              <PlaceholderCard title="Meine Hilfkarte(n)" variant="tile" />
+              {/* ✅ FIX: these were clipping your hovering/overlapping player card */}
+              <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 }}>
-              Notizen
-            </div>
+            <div style={{ fontWeight: 900, color: stylesTokens.textMain, fontSize: 14 }}>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
-        chipOpen={chipOpen}
-        closeChipModalToDash={closeChipModalToDash}
-        chooseChip={chooseChip}
-      />
+      <ChipModal chipOpen={chipOpen} closeChipModalToDash={closeChipModalToDash} chooseChip={chooseChip} />
    </div>
  );
 }
--- a/frontend/src/AppLayout.css
+++ b/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 */
-  border-radius: 18px;     /* etwas kleiner als außen */
+  overflow: visible;
+  border-radius: 18px;
  display: grid;
  justify-items: center;
 }