Flamingos: Chip gekürzt und Ursache des Mobil-Überlaufs behoben
Rückmeldung der Turnabteilung mit Screenshot: auf dem iPhone war im Flamingos-Panel der Fließtext rechts abgeschnitten. Gemessen bei 390px mit aktivem Flamingos-Tab (die anderen Panels sind ausgeblendet, ihre Chips haben Breite 0 — deshalb fiel es beim Prüfen der Seite nicht auf): Dokument 442px bei 379px Bildschirm, also 63px Überlauf; der Chip 393px breit in einer 345px-Karte. Ursache war nicht die Textlänge allein, sondern .group-card__level mit `white-space: nowrap` UND `flex-shrink: 0`: der Chip konnte seinen Text nicht brechen und auch nicht schrumpfen, seine Mindestbreite spannte die ganze Karte auf. Von vier level-Chips war nur dieser betroffen (47 Zeichen gegen 17 bis 25). Zwei Änderungen: - Inhalt wie gewünscht gekürzt: "Turnen · fortgeschritten · Alter nach Absprache" → "Turnen · fortgeschritten". - Sicherheitsnetz im CSS: nowrap raus, max-width: 100% rein. Ein Chip trägt Information, deshalb umbrechen statt mit … kürzen. flex-shrink: 0 bleibt, es hält den Chip neben einem kurzen Gruppennamen in Form. Gegenprobe, damit der Fix nicht nur am kürzeren Text hängt: mit dem LANGEN Text und dem CSS-Fix bleibt das Dokument bei 379px, der Chip bricht auf zwei Zeilen. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
This commit is contained in:
@@ -152,7 +152,7 @@
|
||||
},
|
||||
{
|
||||
"name": "Flamingos",
|
||||
"level": "Turnen · fortgeschritten · Alter nach Absprache",
|
||||
"level": "Turnen · fortgeschritten",
|
||||
"intro": "In unserer Gruppe für fortgeschrittenes Turnen bauen wir auf bereits erlernten turnerischen Fähigkeiten auf. Das Training orientiert sich an den Anforderungen der LK3 (Kür modifiziert, Leistungsklasse 3).",
|
||||
"details": [
|
||||
{ "heading": "Trainingsinhalte", "text": "Je nach Voraussetzung erlernen wir Elemente wie Radwende, Flick-Flack und Salto (Boden), Kippen und Felge vorlings (Barren), Überschläge (Sprung) sowie Räder und Bogengänge (Balken)." },
|
||||
|
||||
Reference in New Issue
Block a user