Fix: untere Navi-Leiste überlappte Inhalt auf dem Handy
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
This commit is contained in:
1 file changed
+15
-4
+15
-4
@@ -2410,7 +2410,7 @@ html.simple-mode .when-choice { min-height: 46px; }
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
@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
|
/* 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
|
das Icon bleibt als Home-Button), Icon-Buttons kleiner und enger, damit
|
||||||
die Suche echten Platz bekommt statt auf ein paar Pixel zusammengequetscht
|
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;
|
padding: 7px 1px; display: flex; flex-direction: column; align-items: center; gap: 2px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
transition: color .15s ease, background .15s ease;
|
transition: color .15s ease, background .15s ease;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
.mobile-nav__item span { font-size: 16px; line-height: 1.1; }
|
.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); }
|
.mobile-nav__item.is-active { color: var(--on-amber); background: var(--signal-amber); }
|
||||||
.toast-container { bottom: calc(66px + env(safe-area-inset-bottom) + 20px); }
|
.toast-container { bottom: calc(74px + env(safe-area-inset-bottom) + 20px); }
|
||||||
.global-disclaimer { padding-bottom: calc(28px + 66px + env(safe-area-inset-bottom) + 20px); }
|
.global-disclaimer { padding-bottom: calc(28px + 74px + env(safe-area-inset-bottom) + 20px); }
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 430px) {
|
@media (max-width: 430px) {
|
||||||
|
|||||||
Reference in new issue
Block a user