diff --git a/src/styles/global.css b/src/styles/global.css index 7c6e90b..840f2e6 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -473,7 +473,10 @@ a:focus-visible, button:focus-visible { left: 50%; right: auto; transform: translateX(-50%); - min-width: 168px; + /* Wie beim Konto-Menü: so breit wie der Inhalt, aber nie schmaler als der Knopf darüber — + statt einer festen Zahl, die je nach Sprache/Textlänge nicht mehr passt. */ + min-width: 100%; + width: max-content; background: var(--c-anthracite-light); border: 1px solid rgba(244, 241, 247, 0.1); border-radius: var(--radius-m); @@ -673,10 +676,14 @@ a:focus-visible, button:focus-visible { left: 50%; right: auto; transform: translateX(-50%); - /* Exakt dieselbe Breite wie das Sprachmenü (.lang-switch-menu), damit beide Kopfzeilen-Menüs - gleich aussehen. Vorher 190px — das war 60px breiter als der Inhalt überhaupt braucht (~130px) - und ragte dadurch sichtbar weiter über den Knopf hinaus als das Sprachmenü. */ - min-width: 168px; + /* KEINE feste Breite mehr: Das Menü ist genau so breit wie sein Inhalt, aber nie schmaler als + der Knopf darüber (min-width: 100% = Breite des .account-menu-Wrappers). Vorher stand hier + eine feste Zahl (erst 190px, dann 168px) — die passt aber nie zu jedem Fall, weil der Knopf + je nach Länge des Benutzernamens unterschiedlich breit ist: Bei einem kurzen Namen wie + "qciga" ragte die Kiste dadurch sichtbar über den Knopf hinaus. So passt es sich von selbst + an jeden Namen und jede Sprache an. */ + min-width: 100%; + width: max-content; background: var(--c-anthracite-light); border: 1px solid rgba(244, 241, 247, 0.1); border-radius: var(--radius-m);