From 80843cc08b1b50fbe5341f55bed5c55a5d93e0a0 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 13:54:58 +0000
Subject: [PATCH] Give Bestellnummer/Datum full-width rows on very narrow
 phones

Below 400px each now spans both columns of the 2-column layout (own
row), so the long order number doesn't wrap; from 400px up they drop
back to col-span-1 side by side in the 4-column layout.

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

diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index 7124a18..fcbc028 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -64,18 +64,21 @@ export default async function KontoBestellungenPage() {
                       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 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). */}
-                  <div className="flex flex-col gap-1">
+                      Bestellnummer/Datum span both tracks of the 2-column
+                      layout (own full-width row each) so the long order
+                      number doesn't wrap on very narrow phones, but drop
+                      to col-span-1 once 4 columns kick in — spanning 2 of
+                      4 tracks there 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 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 col-span-2 min-[400px]: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">
+                  <div className="flex flex-col gap-1 col-span-2 min-[400px]: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>