Document the order-list mobile grid iteration in the README

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

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 `<span>` 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