From f21224ea8494cb74ec7046c383aa5abcafaf7658 Mon Sep 17 00:00:00 2001 From: fs Date: Fri, 31 Jul 2026 22:31:58 +0200 Subject: [PATCH] Nav-Labels an die Seitentitel angeglichen, Dropdown-Breite nachgerechnet MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7 --- data/navigation.json | 6 +++--- public/assets/css/layout.css | 8 +++++++- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/data/navigation.json b/data/navigation.json index 1f944a9..e7adb59 100644 --- a/data/navigation.json +++ b/data/navigation.json @@ -20,9 +20,9 @@ "children": [ { "label": "Übersicht", "slug": "turnen" }, { "label": "Erwachsenenturnen", "slug": "turnen/erwachsenenturnen" }, - { "label": "Eltern-Kind-Turnen", "slug": "turnen/eltern-kind-turnen" }, - { "label": "Fitness und Pilates", "slug": "turnen/fitness-pilates" }, - { "label": "Trampolin", "slug": "turnen/trampolin" }, + { "label": "Eltern-Kind- & Kinderturnen", "slug": "turnen/eltern-kind-turnen" }, + { "label": "Fitness & Pilates", "slug": "turnen/fitness-pilates" }, + { "label": "Trampolinturnen", "slug": "turnen/trampolin" }, { "label": "Wettkampfturnen", "slug": "turnen/wettkampfturnen" } ] }, diff --git a/public/assets/css/layout.css b/public/assets/css/layout.css index 4bb2ee9..7956bb5 100644 --- a/public/assets/css/layout.css +++ b/public/assets/css/layout.css @@ -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);