fs/tsv08kulmbach-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Turn-Gruppenkarten: fr-Spuren begrenzen (Textumbruch bei 300px)

Browse Source 
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) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
This commit is contained in:
Felix Schneider
2026-07-31 21:27:56 +02:00
parent 8c15b2584b
commit 6a9244d847
1 changed files with 35 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
public/assets/css/components.css
View File

@@ -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;