From 7c9bfc3897091656241ea6291611fa90cc3eff0f Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 19:51:22 +0000
Subject: [PATCH] Keep the order-list card at 2 columns always, drop the
 4-column breakpoint

With the badges-together/quantities-together field order, 4 columns at
wider viewports put Status/Zahlungsstatus in the same row as
Bestellnummer/Datum instead of their own row. Plain 2 columns at every
width keeps the intended pairing regardless of available space.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/konto/bestellungen/page.tsx | 46 ++++++++++++++-------------------
 1 file changed, 19 insertions(+), 27 deletions(-)

diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index c488039..ed65a1a 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -44,37 +44,29 @@ export default async function KontoBestellungenPage() {
                 <Link
                   key={order.orderNumber}
                   href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
-                  className="grid grid-cols-2 min-[500px]:grid-cols-4 gap-x-3 sm:gap-x-6 gap-y-4 w-full bg-bg-base border border-border rounded-md p-6 hover:border-brand transition-colors"
+                  className="grid grid-cols-2 gap-x-3 sm:gap-x-6 gap-y-4 w-full bg-bg-base border border-border rounded-md p-6 hover:border-brand transition-colors"
                 >
-                  {/* 4 columns as soon as there's room for badge labels
-                      like "In Bearbeitung" to fit (>= 500px) — every field
-                      spans exactly 1 track, so every row shares the exact
-                      same column boundaries regardless of viewport. Below
-                      500px there just isn't room for 4 tracks without
-                      badges overflowing their column, so it drops to 2
-                      columns; the 6 fields are ordered Bestellnummer/Datum,
-                      Status/Zahlungsstatus, Artikel/Gesamtbetrag so the two
-                      colored badges land in one row together (visually
-                      calmer than being split across two rows) and
-                      Artikel/Gesamtbetrag pair up as the two "quantity"
-                      fields. Plain flex-wrap here (as this used to be)
-                      sized every field to its own content width, so e.g.
+                  {/* Always 2 columns, at every viewport width — the 6
+                      fields are ordered Bestellnummer/Datum,
+                      Status/Zahlungsstatus, Artikel/Gesamtbetrag, so a
+                      plain 2-column grid already tiles them into exactly
+                      those 3 pairs: the two colored badges land in one
+                      row together (visually calmer than being split
+                      across two rows), and Artikel/Gesamtbetrag pair up
+                      as the two "quantity" fields. A wider (4-column)
+                      layout was tried first, but then Status/
+                      Zahlungsstatus shared a row with Bestellnummer/Datum
+                      instead of getting their own — 2 columns keeps the
+                      pairing intentional regardless of available width.
+                      Plain flex-wrap here (as this used to be) sized
+                      every 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's label happened to
-                      be — a grid's column tracks are fixed by the
+                      position from one order card to the next depending
+                      on how wide that particular badge's label happened
+                      to be — a grid's column tracks are fixed by the
                       container width, identical on every card regardless
                       of content, which is what actually guarantees the
-                      "always starts at the same position" alignment.
-                      Bestellnummer/Datum deliberately do NOT span 2
-                      tracks in the 2-column layout — that would stack
-                      them into their own full-width row each instead of
-                      keeping them side by side. No col-start forcing
-                      needed for Artikel here (unlike the previous field
-                      order) — Bestellnummer/Datum/Status/Zahlungsstatus
-                      already fill all 4 tracks of the first row exactly,
-                      so Grid wraps Artikel/Gesamtbetrag to row 2 on its
-                      own. */}
+                      "always starts at the same position" alignment. */}
                   <div className="flex flex-col gap-1">
                     <p className="text-label text-text-muted">Bestellnummer</p>
                     <p className="font-bold text-body-sm text-text-primary">{order.orderNumber}</p>