diff --git a/README.md b/README.md index 55f5aa0..d5d1e5d 100644 --- a/README.md +++ b/README.md @@ -2128,6 +2128,46 @@ Payload backend* specifically (this frontend's own renders were unaffected). See that package's own README for the Turbopack asset-hashing root cause. +## Order list mobile grid (2026-07-30) + +`/konto/bestellungen`'s order cards used plain `flex flex-wrap` for their +6 fields (Bestellnummer, Datum, Artikel, Status, Zahlungsstatus, +Gesamtbetrag), which sized each field to its own content width — so e.g. +"Status"/"Zahlungsstatus" started at a different x position from one +order card to the next depending on how wide that particular badge label +happened to be. Replaced with a single CSS Grid per card +(`grid grid-cols-2 min-[500px]:grid-cols-4`), since a grid's column +tracks are fixed by the container width (identical on every card +regardless of content) rather than by content width. + +Went through several rounds of visual feedback: +- Below 500px there just isn't room for 4 tracks without badge labels + like "In Bearbeitung" overflowing their column, so it drops to 2 + columns there. The 6 fields in DOM order already tile cleanly into 3 + rows of 2 (Bestellnummer/Datum, Artikel/Status, + Zahlungsstatus/Gesamtbetrag) without any reordering. +- Bestellnummer/Datum additionally span both tracks of that 2-column + layout (`col-span-2 min-[500px]:col-span-1`) so the long order number + doesn't wrap on very narrow phones — but must drop back to + `col-span-1` once 4 columns kick in, since spanning 2 of 4 tracks + there would push Datum to start at the 3rd column instead of the 2nd. +- Artikel forces `col-start-1` so it wraps to its own row in the + 4-column layout instead of Grid's auto-placement flowing it into the 2 + cells left empty in row 1 after Bestellnummer/Datum (a harmless no-op + in the 2-column layout, where it's already first in row 2 anyway). +- The breakpoint moved twice during tuning — first sm (640px) → md + (768px) → lg (1024px) while the intent was still "keep 2 columns as + long as possible," then flipped entirely to "stay at 4 columns as long + as possible" once the actual goal was clarified, then settled on a + content-driven `min-[500px]` (started at 400px, moved to 500px) once a + real device screenshot showed 4 columns overflowing on a narrow phone. +- `OrderStatusBadge`/`PaymentStatusBadge` gained `self-start` — as flex + children of a `flex flex-col` parent (default `align-items: stretch`), + the badge `` was stretching to the parent's full width despite + being `inline-flex` itself (flex items are blockified, so `stretch` + still applies); `self-start` keeps the badge background only as wide + as its label. + ## Deployment - **Dockerfile**: 3-stage build (`deps` → `builder` → `runner`) with