From 014f1edcdccfad4b03af052771727360eb91999a Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 19:48:29 +0000
Subject: [PATCH] Reorder order-list card fields: badges together, quantities
 together
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Status/Zahlungsstatus now land in one row (calmer than being split
diagonally across two rows), and Artikel/Gesamtbetrag pair up as the
two "quantity" fields. Also drops the now-unnecessary col-start-1 on
Artikel — Bestellnummer/Datum/Status/Zahlungsstatus already fill all
4 tracks of row 1 exactly with this order, so Grid wraps row 2 on
its own.

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

diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index c0ae6cf..c488039 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -52,11 +52,13 @@ export default async function KontoBestellungenPage() {
                       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 in DOM order already tile into
-                      exactly Bestellnummer/Datum, Artikel/Status,
-                      Zahlungsstatus/Gesamtbetrag without any reordering.
-                      Plain flex-wrap here (as this used to be) sized every
-                      field to its own content width, so e.g.
+                      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.
                       "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
@@ -67,11 +69,12 @@ export default async function KontoBestellungenPage() {
                       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. Artikel forces col-start-1
-                      so it wraps to its own row in the 4-column layout
-                      instead of Grid auto-flowing it into the 2 empty
-                      cells left in row 1 (harmless no-op in the 2-column
-                      layout, where it's already first in row 2 anyway). */}
+                      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. */}
                   <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>
@@ -80,10 +83,6 @@ export default async function KontoBestellungenPage() {
                     <p className="text-label text-text-muted">Datum</p>
                     <p className="text-body-sm text-text-primary">{formatDate(order.createdAt)}</p>
                   </div>
-                  <div className="flex flex-col gap-1 col-start-1">
-                    <p className="text-label text-text-muted">Artikel</p>
-                    <p className="text-body-sm text-text-primary">{order.itemCount}</p>
-                  </div>
                   <div className="flex flex-col gap-1">
                     <p className="text-label text-text-muted">Status</p>
                     <OrderStatusBadge status={order.status} />
@@ -92,6 +91,10 @@ export default async function KontoBestellungenPage() {
                     <p className="text-label text-text-muted">Zahlungsstatus</p>
                     <PaymentStatusBadge paymentStatus={order.paymentStatus} />
                   </div>
+                  <div className="flex flex-col gap-1">
+                    <p className="text-label text-text-muted">Artikel</p>
+                    <p className="text-body-sm text-text-primary">{order.itemCount}</p>
+                  </div>
                   <div className="flex flex-col gap-1">
                     <p className="text-label text-text-muted">Gesamtbetrag</p>
                     <p className="font-bold text-body-sm text-text-primary">{formatPrice(order.total)}</p>