Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give Bestellnummer/Datum full-width rows on very narrow phones

Browse Source 
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>
This commit is contained in:
Marco
2026-07-30 13:54:58 +00:00
parent c6051442df
commit 80843cc08b
1 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/konto/bestellungen/page.tsx
+12 -9
View File
@@ -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>