From 86c92da52b037c0a29d3e0c367d72bb6083db299 Mon Sep 17 00:00:00 2001
From: Jakob Wennberg <149234542+jakobwennberg@users.noreply.github.com>
Date: Thu, 14 May 2026 12:20:39 +0200
Subject: [PATCH] feat(invoices/new): sticky summary sidebar on desktop (#478)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/(dashboard)/invoices/new/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/(dashboard)/invoices/new/page.tsx b/app/(dashboard)/invoices/new/page.tsx
index 4ac46f07..84e14764 100644
--- a/app/(dashboard)/invoices/new/page.tsx
+++ b/app/(dashboard)/invoices/new/page.tsx
@@ -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>