From 25f36e5a53247f5150f864263bda3f1295c3dbd4 Mon Sep 17 00:00:00 2001 From: fs Date: Fri, 31 Jul 2026 21:34:29 +0200 Subject: [PATCH] =?UTF-8?q?Karten-Innenabst=C3=A4nde=20fluid:=20mehr=20Pla?= =?UTF-8?q?tz=20auf=20schmalen=20Handys?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Auf schmalen Bildschirmen stapeln sich Container- und Kartenabstand so, dass für den Inhalt kaum Breite bleibt. Gemessen bei 309px: Container 11,5 + Karte 32 je Seite, das Eingabefeld hatte 220px, also 71% der Bildschirmbreite. Kein harter Breakpoint ("ab 310px vollflächig"), sondern fluide Abstände — ein Umbruch bei 310px sähe bei 311px wieder falsch aus. Das Muster gab es im Projekt schon: fee-table, membership-card, legal__card und matchcenter-empty nutzen clamp()-Abstände. Fest waren genau die drei, über die es stolperte: .form (32px), .group-card (32px) und .group-tabs__panel (40px). Zwei neue Token in tokens.css als einzige Quelle, --pad-card (20…32px) und --pad-card-lg (24…40px). Die OBERGRENZEN sind die bisherigen festen Werte, am Desktop ändert sich also nichts — nachgemessen: 32px bei 1269px Viewport, wie vorher. Es wird nur nach unten schmaler. Ergebnis: Feldbreite bei 309px von 71% auf 76%, bei 379px von 74% auf 80%. Kein Überlauf auf /turnen, den Disziplinseiten und /kontakt bei 320px und 1280px. Die vier bereits fluiden Karten behalten ihre eigenen clamp()-Werte, damit ihr Desktop-Bild unangetastet bleibt; sie in die Token einzusammeln ist eine Aufräumung für später. VORBESTEHEND und nicht von dieser Änderung verursacht (per git stash gegengeprüft, mit und ohne Änderung identisch): /mitglied-werden läuft bei 320px um 12px über, /turnen bei 300px um 13px. Die 320px sind eine echte Gerätebreite (iPhone SE), das gehört als Nächstes angeschaut. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7 --- CLAUDE.md | 1 + public/assets/css/components.css | 10 +++++++--- public/assets/css/tokens.css | 14 ++++++++++++++ 3 files changed, 22 insertions(+), 3 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 8807557..45a5a8b 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -303,6 +303,7 @@ Keine rohen Werte in `base/layout/components/utilities.css` — es gibt für all | Was | Token | Anmerkung | |---|---|---| | `padding` / `margin` / `gap` | `--space-4xs … --space-7xl` (14 Stufen, 4px-Raster) | `--space-4xs` (2px) **nur** für optische Korrekturen (Icon-/Baseline-Nudges), nie fürs Layout | +| Innenabstand von Karten-Flächen | `--pad-card` (20…32px) / `--pad-card-lg` (24…40px) | Keine festen Werte. Auf einem 309px-Handy stapeln sich Container- und Kartenabstand sonst so, dass dem Eingabefeld nur 71% der Bildschirmbreite bleiben. Die Obergrenzen entsprechen den früheren festen Werten, am Desktop ändert sich dadurch nichts. Ein harter Breakpoint (etwa „ab 310px ohne Abstand") wäre die Alternative, sieht aber bei 311px wieder falsch aus | | `font-size` (Text) | `--fs-300 … --fs-1000` | `--fs-550`/`--fs-690` sind die fluiden Zwischenstufen (Lead, Karten-Überschrift) | | `font-size` (Icons) | `--icon-s/m/l/xl` (rem), `--icon-inline-sm/--icon-inline/--icon-inline-lg` (em) | em-Stufen für Icons, die mit ihrer Textzeile mitwachsen sollen | | `letter-spacing` | `--ls-tight/caps/wide/wider` | | diff --git a/public/assets/css/components.css b/public/assets/css/components.css index dfd4b3b..6488a08 100644 --- a/public/assets/css/components.css +++ b/public/assets/css/components.css @@ -1776,7 +1776,11 @@ gap: var(--space-m); width: 100%; max-width: 720px; - padding: var(--space-2xl); + /* --pad-card statt fester 32px: auf einem 309px-Handy blieben dem Eingabefeld + sonst nur 71% der Bildschirmbreite, weil Container- und Kartenabstand sich + stapeln. Obergrenze ist derselbe Wert wie vorher, am Desktop ändert sich + nichts. */ + padding: var(--pad-card); background: var(--clr-glass-bg); border: 1px solid var(--clr-glass-border); border-radius: var(--radius-card); @@ -2799,7 +2803,7 @@ grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-4xl); align-items: start; - padding: var(--space-3xl) var(--space-3xl); + padding: var(--pad-card-lg) var(--pad-card-lg); background: var(--clr-glass-bg); border: 1px solid var(--clr-glass-border); border-radius: var(--radius-card); @@ -2832,7 +2836,7 @@ } .group-card { - padding: var(--space-xl) var(--space-2xl) var(--space-2xl); + padding: var(--space-xl) var(--pad-card) var(--pad-card); background: var(--clr-glass-bg); border: 1px solid var(--clr-glass-border); border-radius: var(--radius-card); diff --git a/public/assets/css/tokens.css b/public/assets/css/tokens.css index 53c93a9..d904e17 100644 --- a/public/assets/css/tokens.css +++ b/public/assets/css/tokens.css @@ -102,6 +102,20 @@ der meistgenutzte). Nach oben wird das Raster gröber, weil große Abstände das vertragen. --space-4xs (2px) ist ausschließlich für optische Korrekturen gedacht (Icon-/Baseline-Nudges), nicht für Layout. */ + /* Karten-Innenabstände. Fluid statt fest, damit auf schmalen Handys nicht ein + Viertel der Bildschirmbreite in gestapelten Innenabständen verschwindet + (gemessen bei 309px: Container 11,5 + Karte 32 je Seite → nur 71% der Breite + blieben für das Eingabefeld). Ein harter Breakpoint bei ~310px wäre die + Alternative gewesen, sieht aber bei 311px wieder falsch aus. + Die OBERGRENZEN entsprechen genau den bisherigen festen Werten, am Desktop + ändert sich also nichts — es wird nur nach unten schmaler. + Vier Karten (fee-table, membership-card, legal__card, matchcenter-empty) + hatten diese clamp()-Formeln schon einzeln stehen; sie behalten ihre eigenen + Werte, damit ihr Desktop-Bild unangetastet bleibt. Sie hier einzusammeln ist + eine Aufräumung für später. */ + --pad-card: clamp(var(--space-m), var(--space-s) + 1.5vw, var(--space-2xl)); /* 20…32px */ + --pad-card-lg: clamp(var(--space-l), var(--space-s) + 2.5vw, var(--space-3xl)); /* 24…40px */ + --space-4xs: 0.125rem; /* 2px */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */