Nav-Labels an die Seitentitel angeglichen, Dropdown-Breite nachgerechnet
Im Menü stand „Eltern-Kind-Turnen", die Seite heißt „Eltern-Kind- & Kinderturnen" — das Kinderturnen fehlte also im Menü, obwohl Eltern genau danach suchen. Beim Prüfen fielen zwei weitere Abweichungen auf, alle drei sind jetzt gleich: Eltern-Kind-Turnen → Eltern-Kind- & Kinderturnen Fitness und Pilates → Fitness & Pilates Trampolin → Trampolinturnen Punkte („…") braucht es dafür nicht: das Dropdown hat min-width und white-space: nowrap, das Panel wächst also mit dem längsten Punkt statt zu beschneiden. Ein abgeschnittener Menüpunkt wäre auch die schlechtere Lösung, weil man dann nicht mehr liest, wohin der Link führt. Es war aber knapper als es aussah. Gemessen mit dem längsten Punkt (187,6px): ruhend 190,0px Platz, im Hover UND auf der aktiven Seite nur 186,0px, weil padding-left dort von --space-s (16px) auf --space-m (20px) wächst. Das Panel wäre beim Rübergehen um zwei Pixel gewachsen und auf dieser Seite dauerhaft breiter gewesen — sichtbar als Flackern, weil es mittig sitzt und sich nach beiden Seiten schiebt. Behoben mit einem Wert: min-width 15rem → 15,5rem. Alle drei Panels bleiben jetzt in jedem Zustand bei 248px, mit 8,4px Luft statt 1,6px Fehlbetrag. Auch bei 1250px Viewport (der schmalsten Breite mit Desktop-Menü) liegt kein Panel am Rand. Die Rechnung steht als Kommentar über der Regel, damit der nächste längere Menüpunkt nachgemessen wird. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
This commit is contained in:
@@ -176,7 +176,13 @@
|
||||
z-index: 25;
|
||||
display: grid;
|
||||
gap: var(--space-3xs);
|
||||
min-width: 15rem;
|
||||
/* 15,5rem statt 15rem: der längste Punkt „Eltern-Kind- & Kinderturnen" ist 187,6px
|
||||
breit, und im Hover bzw. auf der aktiven Seite wächst padding-left von --space-s
|
||||
auf --space-m. Bei 15rem blieben dafür nur 186px, das Panel wuchs beim Hover um
|
||||
zwei Pixel und war auf dieser Seite dauerhaft breiter — als Flackern sichtbar,
|
||||
weil das Panel mittig sitzt und sich also nach beiden Seiten schiebt. Wer hier
|
||||
einen längeren Menüpunkt einträgt, misst die Textbreite im Hover-Zustand nach. */
|
||||
min-width: 15.5rem;
|
||||
margin: 0;
|
||||
/* Gleichmäßiges Padding rundum — Pillen stehen oben/unten/seitlich gleich dezent frei. */
|
||||
padding: var(--space-2xs);
|
||||
|
||||
Reference in New Issue
Block a user