From c6051442dfc12613fc4efdc018ff3aa9c94d1623 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 13:53:41 +0000
Subject: [PATCH] Fix order-list mobile layout: 2 columns under 400px, badges
 no longer stretch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The forced 4-column layout overflowed on narrow phones — badge labels
like "In Bearbeitung" and the order number wrapped/overlapped into
neighboring columns. Drop to 2 columns below 400px (the field order
already tiles cleanly into 3 rows of 2). Also stop OrderStatusBadge/
PaymentStatusBadge from stretching to their flex-col parent's full
width — self-start keeps the badge background only as wide as its label.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/konto/bestellungen/page.tsx             | 24 ++++++++++++++-------
 app/konto/components/OrderStatusBadge.tsx   |  2 +-
 app/konto/components/PaymentStatusBadge.tsx |  2 +-
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index 27fc891..7124a18 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -44,13 +44,19 @@ export default async function KontoBestellungenPage() {
                 <Link
                   key={order.orderNumber}
                   href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
-                  className="grid 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 min-[400px]: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"
                 >
-                  {/* Always 4 columns, even on the narrowest mobile widths
-                      — every field spans exactly 1 track, so every row
-                      shares the exact same column boundaries regardless of
-                      viewport. Plain flex-wrap here (as this used to be)
-                      sized every field to its own content width, so e.g.
+                  {/* 4 columns as soon as there's room for badge labels
+                      like "In Bearbeitung" to fit (>= 400px) — every field
+                      spans exactly 1 track, so every row shares the exact
+                      same column boundaries regardless of viewport. Below
+                      400px 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.
                       "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
@@ -61,8 +67,10 @@ export default async function KontoBestellungenPage() {
                       Bestellnummer/Datum deliberately do NOT span 2 tracks
                       — that 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 instead of Grid auto-flowing it
-                      into the 2 empty cells left in row 1. */}
+                      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). */}
                   <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>
diff --git a/app/konto/components/OrderStatusBadge.tsx b/app/konto/components/OrderStatusBadge.tsx
index a77a55a..bc5bad2 100644
--- a/app/konto/components/OrderStatusBadge.tsx
+++ b/app/konto/components/OrderStatusBadge.tsx
@@ -20,7 +20,7 @@ const STYLES: Record<string, string> = {
 export function OrderStatusBadge({ status }: { status: string }) {
   return (
     <span
-      className={`inline-flex items-center px-2.5 py-1 rounded-full text-label font-bold whitespace-nowrap ${STYLES[status] ?? "bg-bg-muted text-text-muted"}`}
+      className={`self-start inline-flex items-center px-2.5 py-1 rounded-full text-label font-bold whitespace-nowrap ${STYLES[status] ?? "bg-bg-muted text-text-muted"}`}
     >
       {ORDER_STATUS_LABEL[status] ?? status}
     </span>
diff --git a/app/konto/components/PaymentStatusBadge.tsx b/app/konto/components/PaymentStatusBadge.tsx
index f0ace30..c6ae493 100644
--- a/app/konto/components/PaymentStatusBadge.tsx
+++ b/app/konto/components/PaymentStatusBadge.tsx
@@ -25,7 +25,7 @@ const STYLES: Record<string, string> = {
 export function PaymentStatusBadge({ paymentStatus }: { paymentStatus: string }) {
   return (
     <span
-      className={`inline-flex items-center px-2.5 py-1 rounded-full text-label font-bold whitespace-nowrap ${STYLES[paymentStatus] ?? "bg-bg-muted text-text-muted"}`}
+      className={`self-start inline-flex items-center px-2.5 py-1 rounded-full text-label font-bold whitespace-nowrap ${STYLES[paymentStatus] ?? "bg-bg-muted text-text-muted"}`}
     >
       {LABEL[paymentStatus] ?? paymentStatus}
     </span>