From c46f18c37a18447f6a473162f41eef1401a2e4fa Mon Sep 17 00:00:00 2001 From: Andrei Laas Date: Wed, 16 Sep 2026 22:47:26 +0200 Subject: [PATCH] Die acht Kacheln stehen wieder in einer Reihe MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Der erste Anlauf gab jeder Gruppe denselben Anteil der Breite (flex-1). Damit quetschten sich fuenf Kacheln in ein Drittel und brachen um, waehrend die einzelne rechts dasselbe Drittel fuer sich hatte — gemeint war eine Reihe, wie im Entwurf. Die Breite einer Gruppe folgt jetzt der Zahl ihrer Kacheln. Die Zahl geht als CSS-Variable in beide Regeln statt als ausgeschriebene Klasse je Gruppe: kaeme eine neunte Kachel dazu, stimmte die Aufteilung von selbst, waehrend ein von Hand gesetztes xl:flex-[5] jemand nachziehen muesste — und es fiele nicht auf, wenn er es vergisst. Unterhalb der grossen Breite weiterhin untereinander, zwei Kacheln je Reihe: acht nebeneinander waeren auf einem Laptop unlesbar schmal. Die Zahl wird in der Reihe kleiner gesetzt. Je Kachel bleiben dort gut 110 px, und "748.4" braucht in 30 px Schriftgrad mehr, als nach dem Innenabstand uebrig ist — die Kachel hat overflow-hidden, die Zahl waere also nicht zu breit, sondern abgeschnitten. --- app/(app)/page.tsx | 44 ++++++++++++++++++++++++++++++++++---------- 1 file changed, 34 insertions(+), 10 deletions(-) diff --git a/app/(app)/page.tsx b/app/(app)/page.tsx index 999ff1f..ccdddef 100644 --- a/app/(app)/page.tsx +++ b/app/(app)/page.tsx @@ -1,6 +1,6 @@ import { ChevronRight } from "lucide-react"; import Link from "next/link"; -import { Suspense } from "react"; +import { Suspense, type CSSProperties } from "react"; import { AnstehendFilter } from "@/components/dashboard/AnstehendFilter"; import { AnstehendListe, type AnstehendEintrag } from "@/components/dashboard/AnstehendListe"; import { DraftsCard } from "@/components/dashboard/DraftsCard"; @@ -224,16 +224,31 @@ export default async function DashboardPage({ return (
{drafts.length > 0 && } - {/* Die Gruppen nebeneinander, solange der Platz reicht, und darunter, - wenn nicht. `flex-wrap` statt eines Rasters: die Gruppen sind - verschieden breit (fünf, zwei, eine Kachel), und ein Raster zwänge - sie in gleiche Spalten — die einzelne Kachel rechts bekäme dann - denselben Platz wie fünf. */} -
+ {/* ── Eine Reihe, drei Gruppen ────────────────────────────────── + Ab der grossen Breite stehen alle acht Kacheln nebeneinander, die + Überschrift jeweils über den ihren. + + Die Breite einer Gruppe folgt der **Zahl ihrer Kacheln**: fünf, zwei, + eine. Der erste Versuch gab jeder Gruppe denselben Anteil (`flex-1`) + — dann quetschten sich fünf Kacheln in ein Drittel und brachen um, + während die einzelne rechts dasselbe Drittel für sich hatte. + + Die Zahl geht als CSS-Variable in beide Regeln, statt als + ausgeschriebene Klasse je Gruppe. Käme eine neunte Kachel dazu, + stimmte die Aufteilung von selbst; mit `xl:flex-[5]` von Hand müsste + jemand daran denken, und es fiele nicht auf, wenn er es nicht tut. + + Darunter untereinander, je Gruppe zwei Kacheln nebeneinander — in + einer Reihe wären acht Kacheln auf einem Laptop unlesbar schmal. */} +
{kpiGruppen.map((gruppe) => ( -
+

{gruppe.titel}

-
+
{gruppe.kacheln.map((kpi) => ( {/* Number first in the visual order: it is what the eye is looking for, and the label only qualifies it. */} -
{kpi.value}
+ {/* Kleiner, sobald alle acht in einer Reihe stehen: dort + bleiben je Kachel gut 110 px, und „748.4" braucht in + 30 px Schriftgrad mehr davon, als nach dem Innenabstand + übrig ist. Die Kachel hat `overflow-hidden` — die Zahl + wäre also nicht zu breit, sondern abgeschnitten, und + eine abgeschnittene Kennzahl ist schlimmer als eine + kleine. Darunter stehen zwei je Reihe, da ist Platz. */} +
+ {kpi.value} +
{kpi.label}