From 2cdd4ae17ee890a1b13f42bd417447d1678296b5 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Fri, 6 Feb 2026 12:28:41 +0100
Subject: [PATCH] Adjust AdminPanel spacing and enhance modal UI effects

Reduced grid gap in AdminPanel for better spacing consistency. Improved modal overlay and card design with stronger darkening, added blur, and responsive adjustments to prevent layout issues in smaller viewports.
---
 frontend/src/components/AdminPanel.jsx |  2 +-
 frontend/src/styles/styles.js          | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/AdminPanel.jsx b/frontend/src/components/AdminPanel.jsx
index 29fd712..7b53847 100644
--- a/frontend/src/components/AdminPanel.jsx
+++ b/frontend/src/components/AdminPanel.jsx
@@ -124,7 +124,7 @@ export default function AdminPanel() {
               </button>
             </div>
 
-            <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
+            <div style={{ marginTop: 12, display: "grid", gap: 8 }}>
               <input
                 value={displayName}
                 onChange={(e) => setDisplayName(e.target.value)}
diff --git a/frontend/src/styles/styles.js b/frontend/src/styles/styles.js
index 6d88e8f..d6dff21 100644
--- a/frontend/src/styles/styles.js
+++ b/frontend/src/styles/styles.js
@@ -189,25 +189,32 @@ export const styles = {
   modalOverlay: {
     position: "fixed",
     inset: 0,
-    background: "rgba(0,0,0,0.65)",
+    background: "rgba(0,0,0,0.78)",      // stärker abdunkeln
+    backdropFilter: "blur(6px)",         // Hintergrund weich (macht viel aus)
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     padding: 16,
     zIndex: 9999,
     animation: "fadeIn 160ms ease-out",
+    overflowY: "auto",                   // falls Viewport zu klein
   },
+
   modalCard: {
     width: "100%",
     maxWidth: 560,
     borderRadius: 18,
     border: `1px solid rgba(233,216,166,0.18)`,
-    background: "linear-gradient(180deg, rgba(20,20,24,0.92), rgba(12,12,14,0.86))",
+    background: "linear-gradient(180deg, rgba(20,20,24,0.95), rgba(12,12,14,0.92))",
     boxShadow: "0 18px 55px rgba(0,0,0,0.70)",
     padding: 14,
-    backdropFilter: "blur(6px)",
+    backdropFilter: "blur(8px)",
     animation: "popIn 160ms ease-out",
     color: stylesTokens.textMain,
+
+    // neu: damit es nie “kaputt” aussieht
+    maxHeight: "calc(100dvh - 32px)",
+    overflow: "auto",
   },
   modalHeader: {
     display: "flex",