From bfb1df8e59cd995a23a2c33bad1ecbd1c9fc3092 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Fri, 6 Feb 2026 12:56:59 +0100
Subject: [PATCH] Enhance styling consistency and alignment in Admin Panel

Centered elements in the Admin Panel using `justifyItems: "center"`. Adjusted input padding, font size, and primary button styling for improved layout and usability.
---
 frontend/src/components/AdminPanel.jsx | 9 ++++++++-
 frontend/src/styles/styles.js          | 8 ++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/AdminPanel.jsx b/frontend/src/components/AdminPanel.jsx
index f0762a4..b391e81 100644
--- a/frontend/src/components/AdminPanel.jsx
+++ b/frontend/src/components/AdminPanel.jsx
@@ -137,7 +137,14 @@ export default function AdminPanel() {
                 </button>
               </div>
 
-              <div style={{ marginTop: 12, display: "grid", gap: 8 }}>
+              <div
+                style={{
+                  marginTop: 12,
+                  display: "grid",
+                  gap: 8,
+                  justifyItems: "center",   // <<< zentriert alles
+                }}
+              >
                 <input
                   value={displayName}
                   onChange={(e) => setDisplayName(e.target.value)}
diff --git a/frontend/src/styles/styles.js b/frontend/src/styles/styles.js
index 3573531..8770e5f 100644
--- a/frontend/src/styles/styles.js
+++ b/frontend/src/styles/styles.js
@@ -122,13 +122,13 @@ export const styles = {
 
   input: {
     width: "100%",
-    padding: 10,
-    borderRadius: 12,
+    padding: "10px 12px",
+    borderRadius: 14,
     border: `1px solid rgba(233,216,166,0.18)`,
     background: "rgba(10,10,12,0.55)",
     color: stylesTokens.textMain,
     outline: "none",
-    fontSize: 16,
+    fontSize: 15,
   },
 
   primaryBtn: {
@@ -197,7 +197,7 @@ export const styles = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    padding: 16,
+    padding: 12,
     zIndex: 2147483647, // wirklich ganz oben
     background: "rgba(0,0,0,0.72)",
     overflowY: "auto",