From 6a9244d84786a678c5df3013c2c461c29cbba721 Mon Sep 17 00:00:00 2001 From: fs Date: Fri, 31 Jul 2026 21:27:56 +0200 Subject: [PATCH] Turn-Gruppenkarten: fr-Spuren begrenzen (Textumbruch bei 300px) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bei sehr schmalen Breiten stand der Text über den Kartenrand hinaus. Gemessen bei 300px Viewport (clientWidth 289): Dokument 317px, also 28px Überlauf; die einzelne Grid-Spur des Panels rechnete sich auf 267,7px aus, obwohl die Karte nur 193px Inhaltsfläche hat. Ursache: `grid-template-columns: 1.6fr 1fr` bzw. `1fr` — eine fr-Spur hat als automatisches Minimum min-content und kann deshalb nicht schmaler werden als das längste Wort darin. Bei deutschen Komposita ("sportartenübergreifende", "Grundlagenausbildung") sprengt das die Karte. Jetzt minmax(0, …) in beiden Spurdefinitionen von .group-tabs__panel, und dieselbe Korrektur bei .group-list--stacked, wo das Muster latent drinsteckte. Zwei Umwege, die ich mir hätte sparen können: min-width: 0 am Grid-KIND reicht nicht, die SPUR muss das Schrumpfen erlauben. Und overflow-wrap: break-word verkleinert die min-content-Breite nicht (nur `anywhere` täte das) — beides bleibt trotzdem drin, zusammen mit hyphens: auto, weil die Seite lang="de" ist und der Browser die Komposita dann sauber trennt statt hart umzubrechen. Geprüft: alle sechs Turn-Seiten bei 300px, 320px und 390px ohne Überlauf. Desktop unverändert zweispaltig (648,6 / 405,4 px, Verhältnis 1,6:1). OFFEN und bewusst nicht mitgefixt: /turnen läuft bei 300px noch um 13px über, ab 320px nicht mehr. Es kommt aus dem Kontaktformular, nicht aus den Beitragskarten oder Gruppenkarten — die min-content-Breite des Formulars in der Grid-Spur von .container. .container global anzufassen ist mir für 13px auf einer Breite, die kein Gerät hat, zu riskant (das schmalste verbreitete Display ist 320px). Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7 --- public/assets/css/components.css | 40 ++++++++++++++++++++++++++++---- 1 file changed, 35 insertions(+), 5 deletions(-) diff --git a/public/assets/css/components.css b/public/assets/css/components.css index 64ff5c2..dfd4b3b 100644 --- a/public/assets/css/components.css +++ b/public/assets/css/components.css @@ -2787,7 +2787,16 @@ /* Panel-Karte übernimmt das bestehende group-card--stacked-Layout */ .group-tabs__panel { display: grid; - grid-template-columns: 1.6fr 1fr; + /* minmax(0, …) statt nackter fr-Werte: eine fr-Spur hat als automatisches + Minimum min-content und kann deshalb nicht schmaler werden als das längste + Wort darin. Bei deutschen Komposita sprengte das auf schmalen Bildschirmen + die Karte: bei 300px rechnete sich die einzelne Spur auf 267,7px aus, + obwohl die Karte nur 193px Inhaltsfläche hat — das Dokument lief um 28px + über und der Text stand über den Rand hinaus (31.07.2026). + min-width: 0 am Grid-KIND allein reicht dafür nicht, die SPUR muss es + erlauben. Dieselbe Korrektur steht bei .group-list--stacked, wo dasselbe + Muster latent drinsteckte. */ + grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-4xl); align-items: start; padding: var(--space-3xl) var(--space-3xl); @@ -2803,7 +2812,7 @@ @media (max-width: 768px) { .group-tabs__panel { - grid-template-columns: 1fr; + grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding: var(--space-l) var(--space-xl); } @@ -2829,10 +2838,16 @@ border-radius: var(--radius-card); } -/* Gestapelt: Beschreibung links, Trainingszeiten-Panel rechts. */ +/* Gestapelt: Beschreibung links, Trainingszeiten-Panel rechts. + minmax(0, …) statt nackter fr-Werte: eine fr-Spur hat als automatisches Minimum + min-content, kann also nicht schmaler werden als das längste Wort darin. Bei + deutschen Komposita („sportartenübergreifende", „Grundlagenausbildung") sprengte + das auf schmalen Bildschirmen die Karte — bei 300px war der Karteninhalt 268px + breit in 193px Fläche und das Dokument lief um 28px über (31.07.2026). + min-width: 0 am Grid-KIND allein reicht dafür nicht, die Spur muss es erlauben. */ .group-list--stacked .group-card { display: grid; - grid-template-columns: 1.6fr 1fr; + grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-4xl); align-items: start; padding: var(--space-3xl) var(--space-3xl); @@ -2840,7 +2855,7 @@ @media (max-width: 768px) { .group-list--stacked .group-card { - grid-template-columns: 1fr; + grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding: var(--space-l) var(--space-xl) var(--space-xl); } @@ -2888,6 +2903,21 @@ border-radius: 999px; } +/* Grid-Kind der Karte: OHNE min-width: 0 darf es nicht unter seine min-content- + Breite schrumpfen, und die bestimmt bei deutschen Komposita das längste Wort + („sportartenübergreifende", „Grundlagenausbildung"). Bei 300px Bildschirm war der + Body dadurch 268px breit in einer Karte mit 193px Inhaltsfläche, das Dokument lief + um 28px über und der Text stand über den Rand hinaus (31.07.2026). + Dieselbe Falle wie bei .stadionzeitung-page .league-table. + hyphens: auto trennt die Komposita sauber statt sie hart umzubrechen — die Seite + ist als lang="de" ausgezeichnet, der Browser kennt also die Trennregeln. + overflow-wrap bleibt als Notausgang für Wörter ohne mögliche Trennstelle. */ +.group-card__body { + min-width: 0; + hyphens: auto; + overflow-wrap: break-word; +} + /* Intro = Lead-Paragraph, deutlich abgesetzt vom Level-Chip */ .group-card__intro { margin: var(--space-m) 0 0;