From 44f98a3d64f0d43ce4e6ea097cc7987c6a2c321c Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 13:45:24 +0000
Subject: [PATCH] Delay the order-list card's grid breakpoint from sm to md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The card sits inside a max-w-[56rem] container with padding, so at
the sm breakpoint (640px viewport) the card itself is still too
narrow for 4 columns — the wrap to 4 columns was happening too early.

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

diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index abc59a1..6ac41b6 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -44,11 +44,11 @@ export default async function KontoBestellungenPage() {
                 <Link
                   key={order.orderNumber}
                   href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
-                  className="grid grid-cols-2 sm:grid-cols-4 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 md:grid-cols-4 gap-x-6 gap-y-4 w-full bg-bg-base border border-border rounded-md p-6 hover:border-brand transition-colors"
                 >
                   {/* One grid for the whole card, not two separate flex/grid
                       groups — every field spans exactly 1 of the 4 tracks
-                      (2 on mobile), so every row shares the exact same
+                      (2 below md), so every row shares the exact same
                       column boundaries. 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
@@ -60,7 +60,13 @@ export default async function KontoBestellungenPage() {
                       "always starts at the same position" alignment.
                       Bestellnummer/Datum deliberately do NOT span 2 tracks
                       — that would push Datum to start at the 3rd column
-                      instead of the 2nd. */}
+                      instead of the 2nd. Artikel forces md: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. The
+                      breakpoint is md (768px), not sm — this card lives
+                      inside a max-w-[56rem] container with padding, so at
+                      sm (640px) the card itself is still too narrow for 4
+                      columns to look right. */}
                   <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>
@@ -69,7 +75,7 @@ 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 sm:col-start-1">
+                  <div className="flex flex-col gap-1 md:col-start-1">
                     <p className="text-label text-text-muted">Artikel</p>
                     <p className="text-body-sm text-text-primary">{order.itemCount}</p>
                   </div>