From 7f3b77a03695a05ad58a9b2e298cef7da7449dce Mon Sep 17 00:00:00 2001 From: qcigano Date: Tue, 4 Aug 2026 09:56:23 +0200 Subject: [PATCH] =?UTF-8?q?Kopfzeilen-Men=C3=BCs=20passen=20sich=20der=20K?= =?UTF-8?q?nopfbreite=20an=20statt=20fester=20Breite?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Konto- und Sprachmenü hatten feste Breiten (190px bzw. 168px). Die passen nie zu jedem Fall, weil der Konto-Knopf je nach Länge des Benutzernamens unterschiedlich breit ist: Bei einem kurzen Namen wie "qciga" ragte die Kiste sichtbar über den Knopf hinaus. Jetzt: min-width 100% (nie schmaler als der Knopf) + width max-content (sonst genau so breit wie der Inhalt). Passt sich damit automatisch an Name und Sprache an. Nachgemessen, Überstand pro Seite: Konto "qciga" 27,6px -> 8,6px Konto "Van Van" 22,4px -> 3,4px Konto langer Name 0px Sprache DE/FR 0px (EN 1,8px, CH 0,3px) Alle weiterhin exakt mittig (Versatz 0), auch mobil innerhalb des Fensters. Co-Authored-By: Claude Opus 5 --- src/styles/global.css | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) 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);