feat(invoices/new): sticky summary sidebar on desktop (#478)

The right column (Fakturadetaljer + Summering + Granska & skapa)
now stays pinned at top:6 while the user scrolls through line items
on the left.

Pattern is standard for invoice editors with a totals sidebar (Stripe
Billing, QuickBooks, Bokio): totals + action button always in view,
no height-matching gymnastics needed since the right side scrolls
independently. Also makes the height mismatch between left and right
columns irrelevant — the right is sticky, the left flows naturally.

- Outer grid: add lg:items-start so children top-align (sticky needs
  natural height, not stretched)
- Right wrapper: add lg:sticky lg:top-6 lg:self-start

Mobile (< lg) is unchanged — single-column stack with the existing
bottom sticky total bar.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jakob Wennberg
2026-05-14 12:20:39 +02:00
committed by GitHub
co-authored by Claude Opus 4.7
parent ef8f1c9636
commit 86c92da52b
+3 -3
View File
@@ -473,7 +473,7 @@ export default function NewInvoicePage() {
)}
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6 pb-28 md:pb-0">
<div className="grid gap-6 lg:grid-cols-3">
<div className="grid gap-6 lg:grid-cols-3 lg:items-start">
{/* Main content */}
<div className="lg:col-span-2 space-y-6">
{/* Customer selection */}
@@ -684,8 +684,8 @@ export default function NewInvoicePage() {
</Card>
</div>
{/* Sidebar */}
<div className="space-y-6">
{/* Sidebar — sticky so totals + action stay visible while scrolling items */}
<div className="space-y-6 lg:sticky lg:top-6 lg:self-start">
{/* Invoice details */}
<Card>
<CardHeader>