Keep Bestellnummer/Datum side by side below 500px too
Reverts the col-span-2 full-width-row experiment for very narrow phones — side by side reads better even with the occasional wrap. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -64,21 +64,19 @@ 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 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
|
||||
Bestellnummer/Datum deliberately do NOT span 2
|
||||
tracks in the 2-column layout — that would stack
|
||||
them into their own full-width row each instead of
|
||||
keeping them side by side. 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-[500px]:col-span-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>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 col-span-2 min-[500px]:col-span-1">
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-label text-text-muted">Datum</p>
|
||||
<p className="text-body-sm text-text-primary">{formatDate(order.createdAt)}</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user