From 35ddc5cda80bf402240c584af9a75e62b4f3cade Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Mon, 3 Aug 2026 22:28:53 +0200
Subject: [PATCH] Konto-Dropdown: echt zentriert unterm Knopf + kompakter, wie
 bei Dogfather
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

War rechtsbündig an der Knopfkante ausgerichtet, dadurch je nach Länge des Benutzernamens
optisch "nicht zentriert" zum Knopf. Jetzt wie auf der Dogfather-Referenzseite
(.nav-dropdown: left:50% + translateX(-50%)) — bleibt immer exakt mittig unterm Knopf.
Dropdown-Einträge außerdem etwas kompakter (kleinere Schrift/Padding, näher an der
Dogfather-Vorlage) statt für nur zwei Einträge unnötig groß zu wirken. Per Geometrie-Messung
verifiziert: 0px Abweichung zwischen Knopf- und Dropdown-Mitte.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/styles/global.css | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index f0ae713..50c3723 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -659,8 +659,13 @@ a:focus-visible, button:focus-visible {
 .account-dropdown {
   position: absolute;
   top: calc(100% + 0.6rem);
-  right: 0;
-  min-width: 180px;
+  /* Wie auf der Dogfather-Referenzseite (assets/css/main.css, .nav-dropdown): ECHT zentriert
+     unter dem auslösenden Knopf (left:50% + translateX(-50%)) statt rechtsbündig an dessen
+     Kante ausgerichtet — bleibt so auch bei unterschiedlich breiten Benutzernamen mittig. */
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+  min-width: 190px;
   background: var(--c-anthracite-light);
   border: 1px solid rgba(244, 241, 247, 0.1);
   border-radius: var(--radius-m);
@@ -677,22 +682,24 @@ a:focus-visible, button:focus-visible {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.6em;
+  gap: 0.5em;
   width: 100%;
   text-align: center;
   background: none;
   border: none;
   color: var(--c-text);
-  padding: 0.6em 0.7em;
+  /* Etwas kompakter als vorher (Dogfather-Referenz: .55rem .7rem, .92rem Schrift) — wirkte bei
+     nur 2 Einträgen sonst unnötig groß/aufgebläht. */
+  padding: 0.5em 0.65em;
   border-radius: var(--radius-s);
-  font-size: 0.9rem;
+  font-size: 0.88rem;
   cursor: pointer;
   transition: background 0.15s var(--ease);
 }
 /* Feste Icon-Spalte, statt das Emoji einfach vor den Text zu schreiben — sonst starten "Mein
    Konto" und "Abmelden" je nach Emoji-Breite an leicht unterschiedlichen Stellen und wirken
    unausgerichtet. Mit fixer Breite + zentriertem Icon stehen alle Labels exakt untereinander. */
-.account-dropdown-icon { flex-shrink: 0; width: 1.2em; text-align: center; }
+.account-dropdown-icon { flex-shrink: 0; width: 1.1em; text-align: center; font-size: 0.95em; }
 .account-dropdown a:hover,
 .account-dropdown button:hover { background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
 @media (max-width: 860px) {