From 8c15b2584bbe0fca53d473c7511c547960f4d5c0 Mon Sep 17 00:00:00 2001 From: fs Date: Fri, 31 Jul 2026 21:17:24 +0200 Subject: [PATCH] =?UTF-8?q?Flamingos:=20Chip=20gek=C3=BCrzt=20und=20Ursach?= =?UTF-8?q?e=20des=20Mobil-=C3=9Cberlaufs=20behoben?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7 --- data/turnen.json | 2 +- public/assets/css/components.css | 13 ++++++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/data/turnen.json b/data/turnen.json index f19e419..b1b43a8 100644 --- a/data/turnen.json +++ b/data/turnen.json @@ -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)." }, diff --git a/public/assets/css/components.css b/public/assets/css/components.css index 4bedd45..64ff5c2 100644 --- a/public/assets/css/components.css +++ b/public/assets/css/components.css @@ -2866,7 +2866,19 @@ } .group-card__level { + /* flex-shrink: 0 hält den Chip neben einem kurzen Gruppennamen in Form; der + Elternteil hat flex-wrap, ein langer Chip rutscht also ohnehin auf eine + eigene Zeile. + + max-width und der erlaubte Umbruch sind das Sicherheitsnetz: mit + `white-space: nowrap` UND `flex-shrink: 0` konnte der Chip seinen Text nicht + brechen und auch nicht schrumpfen — seine Mindestbreite spannte damit die + ganze Karte auf. Bei den „Flamingos" (47 Zeichen) war der Chip am Handy + 393px breit in einer 345px-Karte, das Dokument lief um 63px über und der + Fließtext war rechts abgeschnitten (Rückmeldung der Turnabteilung, + 31.07.2026). Ein Chip trägt Information, deshalb umbrechen statt mit … kürzen. */ flex-shrink: 0; + max-width: 100%; padding: var(--space-4xs) var(--space-2xs); font-size: var(--fs-400); text-transform: uppercase; @@ -2874,7 +2886,6 @@ color: var(--clr-text-muted); border: 1px solid var(--clr-glass-border-strong); border-radius: 999px; - white-space: nowrap; } /* Intro = Lead-Paragraph, deutlich abgesetzt vom Level-Chip */