DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Kopfzeilen-Menüs passen sich der Knopfbreite an statt fester Breite

Browse Source 
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 <[email protected]>
This commit is contained in:
qcigano
2026-08-04 09:56:23 +02:00
co-authored by Claude Opus 5
parent 98e61e47f9
commit 7f3b77a036
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+12 -5
View File
@@ -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);