From 598b8b9b6e2700978f332af46762eb1523bad38b Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Sat, 7 Feb 2026 12:30:29 +0100
Subject: [PATCH] Improve HUD styling and layout consistency

Adjusted various height, padding, and spacing values for better alignment and responsiveness in the HUD. Increased font sizes and refined positioning to ensure a visually balanced layout. These changes enhance the user experience by improving aesthetic and functional design.
---
 frontend/src/App.jsx       | 24 +++++++++++++++---------
 frontend/src/AppLayout.css |  2 ++
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index a56f51c..cbd17ad 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -429,16 +429,21 @@ export default function App() {
     return (
       <div
         style={{
+          height: "100%",           // 🔥 füllt HUD-Zelle
+          minHeight: 0,
           background: "transparent",
           border: "none",
           boxShadow: "none",
-          padding: 4,
-          minWidth: 0,
+          padding: 0,
+          display: "grid",
+          placeItems: "center",     // zentriert Pergament in voller Höhe
         }}
       >
-        {/* Pergament */}
         <div
           style={{
+            width: "100%",
+            height: "100%",         // 🔥 Pergament darf in die Höhe gehen
+            minHeight: 0,
             borderRadius: 18,
             background: `
               radial-gradient(140% 160% at 15% 10%, rgba(235,215,175,0.88), rgba(215,185,135,0.82) 55%, rgba(165,125,75,0.75)),
@@ -451,7 +456,7 @@ export default function App() {
             overflow: "hidden",
             display: "grid",
             placeItems: "center",
-            padding: "22px 18px",
+            padding: "18px 18px",
           }}
         >
           {/* Papier-Flecken */}
@@ -473,7 +478,7 @@ export default function App() {
           <div
             style={{
               position: "absolute",
-              inset: 10,
+              inset: 12,
               borderRadius: 14,
               border: "1px solid rgba(202,162,74,0.40)",
               boxShadow: "inset 0 0 0 1px rgba(242,210,122,0.14)",
@@ -494,7 +499,7 @@ export default function App() {
               style={{
                 color: GOLD,
                 fontWeight: 900,
-                fontSize: 46,
+                fontSize: 52,        // etwas größer, weil mehr Platz
                 letterSpacing: 0.6,
                 lineHeight: 1,
                 textShadow:
@@ -508,9 +513,9 @@ export default function App() {
               style={{
                 color: GOLD,
                 fontWeight: 900,
-                fontSize: 18,
+                fontSize: 19,
                 letterSpacing: 1.4,
-                transform: "translateY(-6px)",
+                transform: "translateY(-7px)",
                 textShadow:
                   "0 1px 0 rgba(0,0,0,0.32), 0 0 14px rgba(242,210,122,0.22)",
                 opacity: 0.95,
@@ -524,7 +529,7 @@ export default function App() {
           <div
             style={{
               position: "absolute",
-              bottom: 12,
+              bottom: 14,
               right: 14,
               color: "rgba(60,40,18,0.55)",
               fontSize: 11,
@@ -547,6 +552,7 @@ export default function App() {
   
 
 
+
   
 
   return (
diff --git a/frontend/src/AppLayout.css b/frontend/src/AppLayout.css
index a4053e6..d708471 100644
--- a/frontend/src/AppLayout.css
+++ b/frontend/src/AppLayout.css
@@ -130,6 +130,7 @@ body {
 
 /* HUD */
 .playerHud {
+  height: 100%;
   min-height: 0;
   overflow: hidden;
   display: grid;
@@ -139,6 +140,7 @@ body {
 }
 
 .playerHudMiddle {
+  height: 100%;
   min-width: 0;
   min-height: 0;
   overflow: hidden;