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,7 +601,8 @@ export default function App() {
       />
 
       {/* Bottom snack for joins */}
-      {snack && (
+      {snack &&
+        createPortal(
           <div
             style={{
               position: "fixed",
@@ -619,12 +622,13 @@ export default function App() {
               textAlign: "center",
               zIndex: 2147483647,
               pointerEvents: "none",
-            animation: "fadeIn 120ms ease-out",
             }}
           >
             {snack}
-        </div>
-      )}
+          </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" && (
             <>