frontend/src/App.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 
 import { api } from "./api/client";
 import { cycleTag } from "./utils/cycleTag";
@@ -581,6 +582,7 @@ export default function App() {
         currentCode={gameMeta?.code || ""}
         gameFinished={!!gameMeta?.winner_user_id}
         hasGame={!!gameId}
+        currentMembers={members}
       />
 
       <ChipModal
@@ -599,32 +601,34 @@ export default function App() {
       />
 
       {/* Bottom snack for joins */}
-      {snack && (
-        <div
-          style={{
-            position: "fixed",
-            left: "50%",
-            bottom: 14,
-            transform: "translateX(-50%)",
-            maxWidth: "92vw",
-            padding: "10px 12px",
-            borderRadius: 14,
-            border: `1px solid ${stylesTokens.panelBorder}`,
-            background: stylesTokens.panelBg,
-            color: stylesTokens.textMain,
-            boxShadow: "0 12px 30px rgba(0,0,0,0.35)",
-            backdropFilter: "blur(6px)",
-            fontWeight: 900,
-            fontSize: 13,
-            textAlign: "center",
-            zIndex: 2147483647,
-            pointerEvents: "none",
-            animation: "fadeIn 120ms ease-out",
-          }}
-        >
-          {snack}
-        </div>
-      )}
+      {snack &&
+        createPortal(
+          <div
+            style={{
+              position: "fixed",
+              left: "50%",
+              bottom: 14,
+              transform: "translateX(-50%)",
+              maxWidth: "92vw",
+              padding: "10px 12px",
+              borderRadius: 14,
+              border: `1px solid ${stylesTokens.panelBorder}`,
+              background: stylesTokens.panelBg,
+              color: stylesTokens.textMain,
+              boxShadow: "0 12px 30px rgba(0,0,0,0.35)",
+              backdropFilter: "blur(6px)",
+              fontWeight: 900,
+              fontSize: 13,
+              textAlign: "center",
+              zIndex: 2147483647,
+              pointerEvents: "none",
+            }}
+          >
+            {snack}
+          </div>,
+          document.body
+        )
+      }
     </div>
   );
 }

frontend/src/components/NewGameModal.jsx

@@ -12,6 +12,7 @@ export default function NewGameModal({
   currentCode = "",
   gameFinished = false,
   hasGame = false,
+  currentMembers = [],
 }) {
   // modes: running | choice | create | join
   const [mode, setMode] = useState("choice");
@@ -168,6 +169,47 @@ export default function NewGameModal({
             </>
           )}
 
+          {currentMembers?.length > 0 && (
+            <div
+              style={{
+                marginTop: 10,
+                padding: 10,
+                borderRadius: 14,
+                border: `1px solid ${stylesTokens.panelBorder}`,
+                background: stylesTokens.panelBg,
+                display: "grid",
+                gap: 8,
+              }}
+            >
+              <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
+                Aktuelle Spieler ({currentMembers.length})
+              </div>
+
+              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+                {currentMembers.map((m) => {
+                  const name = ((m.display_name || "").trim() || (m.email || "").trim() || "—");
+                  return (
+                    <div
+                      key={m.id}
+                      style={{
+                        padding: "6px 10px",
+                        borderRadius: 999,
+                        border: `1px solid rgba(233,216,166,0.18)`,
+                        background: "rgba(10,10,12,0.35)",
+                        color: stylesTokens.textMain,
+                        fontSize: 13,
+                        fontWeight: 900,
+                      }}
+                    >
+                      {name}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+
           {/* ✅ CHOICE: nur wenn Spiel beendet oder kein Spiel selected */}
           {mode === "choice" && (
             <>