From 53c452583d15518aa728d44717e147874f5e32bb Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 13:56:33 +0000
Subject: [PATCH] Move the order-list 2-to-4-column breakpoint from 400px to
 500px

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

diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index fcbc028..908e3c9 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -44,13 +44,13 @@ export default async function KontoBestellungenPage() {
                 <Link
                   key={order.orderNumber}
                   href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
-                  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"
+                  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"
                 >
                   {/* 4 columns as soon as there's room for badge labels
-                      like "In Bearbeitung" to fit (>= 400px) — every field
+                      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
-                      400px there just isn't room for 4 tracks without
+                      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,
@@ -74,11 +74,11 @@ export default async function KontoBestellungenPage() {
                       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 col-span-2 min-[400px]:col-span-1">
+                  <div className="flex flex-col gap-1 col-span-2 min-[500px]:col-span-1">
                     <p className="text-label text-text-muted">Bestellnummer</p>
                     <p className="font-bold text-body-sm text-text-primary">{order.orderNumber}</p>
                   </div>
-                  <div className="flex flex-col gap-1 col-span-2 min-[400px]:col-span-1">
+                  <div className="flex flex-col gap-1 col-span-2 min-[500px]:col-span-1">
                     <p className="text-label text-text-muted">Datum</p>
                     <p className="text-body-sm text-text-primary">{formatDate(order.createdAt)}</p>
                   </div>