From 1fe1a260e4b04bceba98b1a42a3e678ba0d050bf Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 13:49:16 +0000
Subject: [PATCH] Keep the order-list card at 4 columns on all screen sizes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drop the responsive grid-cols-2/4 switch entirely — stay in the
4-column layout even on the narrowest mobile widths, with a tighter
column gap below sm to help it fit.

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

diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index dcef641..27fc891 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -44,29 +44,25 @@ export default async function KontoBestellungenPage() {
                 <Link
                   key={order.orderNumber}
                   href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
-                  className="grid grid-cols-2 lg: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-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"
                 >
-                  {/* One grid for the whole card, not two separate flex/grid
-                      groups — every field spans exactly 1 of the 4 tracks
-                      (2 below lg), 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
-                      x position from one order card to the next depending
-                      on how wide that particular badge's label happened to
+                  {/* 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.
+                      "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
                       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
                       — that would push Datum to start at the 3rd column
-                      instead of the 2nd. Artikel forces lg: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 lg (1024px) so the 2-column layout
-                      stays for the whole mobile/tablet range and only
-                      switches to 4 columns once there's real desktop
-                      width to fit it. */}
+                      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. */}
                   <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>
@@ -75,7 +71,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 lg:col-start-1">
+                  <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>