From 17088e588f19c6d835b27e8e980eaa7c17d97289 Mon Sep 17 00:00:00 2001
From: Claude Dev <claude-dev@aegis-sight.de>
Date: Wed, 18 Mar 2026 00:08:20 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20Credits-Dropdown=20linksb=C3=BCndig,=20B?=
 =?UTF-8?q?alken-Track=20sichtbar,=20Prozentzahl=20rechts,=20kein=20Fettdr?=
 =?UTF-8?q?uck,=20mehr=20Abstand?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/static/css/style.css  | 33 ++++++++++++++++++++-------------
 src/static/dashboard.html |  3 ++-
 src/static/js/app.js      |  2 ++
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/static/css/style.css b/src/static/css/style.css
index ee7d086..c1a1ee8 100644
--- a/src/static/css/style.css
+++ b/src/static/css/style.css
@@ -5338,13 +5338,14 @@ body.tutorial-active .tutorial-cursor {
 
 /* ===== Credits-Anzeige im User-Dropdown ===== */
 .credits-section {
-    padding: 8px 16px 12px;
+    padding: 0;
+    text-align: left;
 }
 
 .credits-divider {
     height: 1px;
     background: var(--border);
-    margin-bottom: 10px;
+    margin: 8px 0;
 }
 
 .credits-label {
@@ -5352,23 +5353,24 @@ body.tutorial-active .tutorial-cursor {
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: var(--text-secondary);
-    margin-bottom: 6px;
+    color: var(--text-tertiary);
+    margin-bottom: 8px;
+    text-align: left;
 }
 
 .credits-bar-container {
     width: 100%;
     height: 8px;
     background: rgba(255,255,255,0.08);
-    border: 1px solid rgba(255,255,255,0.1);
-    border-radius: 3px;
+    border: 1px solid rgba(255,255,255,0.12);
+    border-radius: 4px;
     overflow: hidden;
-    margin-bottom: 4px;
+    margin-bottom: 10px;
 }
 
 .credits-bar {
     height: 100%;
-    border-radius: 3px;
+    border-radius: 4px;
     background: var(--accent);
     transition: width 0.6s ease, background-color 0.3s ease;
     min-width: 2px;
@@ -5384,13 +5386,18 @@ body.tutorial-active .tutorial-cursor {
 
 .credits-info {
     font-size: 12px;
-    color: var(--text-secondary);
+    color: var(--text-tertiary);
     display: flex;
-    justify-content: flex-start;
-    gap: 4px;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .credits-info span {
-    font-weight: 600;
-    color: var(--text-primary);
+    font-weight: 400;
+    color: var(--text-secondary);
+}
+
+.credits-percent {
+    font-size: 11px;
+    color: var(--text-tertiary);
 }
diff --git a/src/static/dashboard.html b/src/static/dashboard.html
index 42151d7..3729167 100644
--- a/src/static/dashboard.html
+++ b/src/static/dashboard.html
@@ -57,7 +57,8 @@
                                 <div id="credits-bar" class="credits-bar"></div>
                             </div>
                             <div class="credits-info">
-                                <span id="credits-remaining">0</span> von <span id="credits-total">0</span>
+                                <span><span id="credits-remaining">0</span> von <span id="credits-total">0</span></span>
+                                <span class="credits-percent" id="credits-percent"></span>
                             </div>
                         </div>
                     </div>
diff --git a/src/static/js/app.js b/src/static/js/app.js
index ad48f52..a462a3b 100644
--- a/src/static/js/app.js
+++ b/src/static/js/app.js
@@ -490,6 +490,8 @@ const App = {
                 } else if (percentUsed > 50) {
                     bar.classList.add('warning');
                 }
+                const percentEl = document.getElementById("credits-percent");
+                if (percentEl) percentEl.textContent = percentRemaining.toFixed(0) + "% verbleibend";
             }
 
             // Dropdown Toggle