From abab758a47302b75e8ecc63990a4440aa8ba45bb Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 28 Sep 2026 12:42:58 +0200 Subject: [PATCH] =?UTF-8?q?Fix:=20untere=20Navi-Leiste=20=C3=BCberlappte?= =?UTF-8?q?=20Inhalt=20auf=20dem=20Handy?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ein langes Label ("Meine Haltestellen") ist in der 6-spaltigen mobilen Navigationsleiste auf zwei Zeilen umgebrochen und hat dadurch die ganze Leiste höher gemacht, als die reservierte body-padding-bottom (84px) vorgesehen hat - die Leiste hat sich sichtbar über die letzte Abfahrts- zeile gelegt. - Labels in der mobilen Navi-Leiste sind jetzt zwangsweise einzeilig (nowrap + ellipsis) statt umzubrechen, damit alle 6 Items exakt gleich hoch bleiben - Sicherheitsabstand unten leicht erhöht (84px -> 92px), inkl. der abhängigen Toast-/Disclaimer-Offsets Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y --- styles.css | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/styles.css b/styles.css index b9994eb..82b768b 100644 --- a/styles.css +++ b/styles.css @@ -2410,7 +2410,7 @@ html.simple-mode .when-choice { min-height: 46px; } } @media (max-width: 700px) { - body { padding-bottom: 84px; } + body { padding-bottom: 92px; } /* Header auf dem Handy so schmal wie möglich halten: Wortmarke weg (nur das Icon bleibt als Home-Button), Icon-Buttons kleiner und enger, damit die Suche echten Platz bekommt statt auf ein paar Pixel zusammengequetscht @@ -2464,12 +2464,23 @@ html.simple-mode .when-choice { min-height: 46px; } padding: 7px 1px; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 2px; transition: color .15s ease, background .15s ease; + min-width: 0; } .mobile-nav__item span { font-size: 16px; line-height: 1.1; } - .mobile-nav__item small { font-size: 8.5px; } + /* Feste einzeilige Höhe erzwingen - ein langes Label (z.B. "Meine + Haltestellen") ist sonst auf zwei Zeilen umgebrochen, hat die ganze + Leiste aufgebläht und dadurch den unteren Inhalt überlappt, weil die + reservierte body-padding-bottom nicht mehr ausgereicht hat. */ + .mobile-nav__item small { + font-size: 8.5px; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } .mobile-nav__item.is-active { color: var(--on-amber); background: var(--signal-amber); } - .toast-container { bottom: calc(66px + env(safe-area-inset-bottom) + 20px); } - .global-disclaimer { padding-bottom: calc(28px + 66px + env(safe-area-inset-bottom) + 20px); } + .toast-container { bottom: calc(74px + env(safe-area-inset-bottom) + 20px); } + .global-disclaimer { padding-bottom: calc(28px + 74px + env(safe-area-inset-bottom) + 20px); } } @media (max-width: 430px) {