From ef8f1c963647964b0f12a95685db46eff47f629e Mon Sep 17 00:00:00 2001
From: Jakob Wennberg <149234542+jakobwennberg@users.noreply.github.com>
Date: Thu, 14 May 2026 11:57:44 +0200
Subject: [PATCH] fix(invoices/new): revert grid row alignment, restore 2-col
 stacking (#477)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The row-aligned grid created visible gaps in the left column because
Fakturadetaljer (5+ form fields, ~650px) is much taller than
Kund + Fakturarader combined (~500px). Even with lg:row-span-2 on
Fakturadetaljer, CSS Grid distributed the extra ~150px as whitespace
in the left column's rows, which looked broken.

Reverting to the original two-column independent-stacking layout —
each column flows its cards naturally, no row alignment. Anteckningar
won't be perfectly horizontally aligned with Summering, but the page
won't have weird internal gaps either. Independent stacking is the
right call when column heights legitimately differ.

- Outer grid: lg:grid-cols-3 (drop auto-rows-min and items-start)
- Left wrapper restored: <div className="lg:col-span-2 space-y-6">
- Right wrapper restored: <div className="space-y-6">
- All Card / Button col-start / row-start / row-span / col-span
  classes removed

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/(dashboard)/invoices/new/page.tsx | 78 ++++++++++++++-------------
 1 file changed, 42 insertions(+), 36 deletions(-)

diff --git a/app/(dashboard)/invoices/new/page.tsx b/app/(dashboard)/invoices/new/page.tsx
index d13340ef..4ac46f07 100644
--- a/app/(dashboard)/invoices/new/page.tsx
+++ b/app/(dashboard)/invoices/new/page.tsx
@@ -473,9 +473,11 @@ 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 lg:auto-rows-min lg:items-start">
-          {/* Customer selection */}
-          <Card className="lg:col-span-2 lg:row-start-1">
+        <div className="grid gap-6 lg:grid-cols-3">
+          {/* Main content */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Customer selection */}
+            <Card>
             <CardHeader>
               <CardTitle>Kund<RequiredMark /></CardTitle>
               <CardDescription>Välj vilken kund fakturan ska skickas till</CardDescription>
@@ -516,10 +518,10 @@ export default function NewInvoicePage() {
             </CardContent>
           </Card>
 
-          {/* Invoice items */}
-          <Card className="lg:col-span-2 lg:row-start-2">
-            <CardHeader>
-              <CardTitle>Fakturarader</CardTitle>
+            {/* Invoice items */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Fakturarader</CardTitle>
               <CardDescription>Lägg till produkter eller tjänster</CardDescription>
             </CardHeader>
             <CardContent>
@@ -667,24 +669,27 @@ export default function NewInvoicePage() {
             </CardContent>
           </Card>
 
-          {/* Notes */}
-          <Card className="lg:col-span-2 lg:row-start-3">
-            <CardHeader>
-              <CardTitle>Anteckningar</CardTitle>
+            {/* Notes */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Anteckningar</CardTitle>
               <CardDescription>Valfritt meddelande på fakturan</CardDescription>
             </CardHeader>
-            <CardContent>
-              <Textarea
-                placeholder="T.ex. betalningsvillkor eller tack för samarbetet..."
-                {...register('notes')}
-              />
-            </CardContent>
-          </Card>
+              <CardContent>
+                <Textarea
+                  placeholder="T.ex. betalningsvillkor eller tack för samarbetet..."
+                  {...register('notes')}
+                />
+              </CardContent>
+            </Card>
+          </div>
 
-          {/* Invoice details */}
-          <Card className="lg:col-start-3 lg:row-start-1 lg:row-span-2">
-            <CardHeader>
-              <CardTitle>Fakturadetaljer</CardTitle>
+          {/* Sidebar */}
+          <div className="space-y-6">
+            {/* Invoice details */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Fakturadetaljer</CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
               <div className="space-y-2">
@@ -781,9 +786,9 @@ export default function NewInvoicePage() {
           </Card>
 
           {/* Summary */}
-          <Card className="lg:col-start-3 lg:row-start-3">
-            <CardHeader>
-              <CardTitle>Summering</CardTitle>
+            <Card>
+              <CardHeader>
+                <CardTitle>Summering</CardTitle>
             </CardHeader>
             <CardContent className="space-y-3">
               <div className="flex justify-between">
@@ -822,17 +827,18 @@ export default function NewInvoicePage() {
             </CardContent>
           </Card>
 
-          {/* Actions — desktop/tablet only */}
-          <Button
-            type="submit"
-            className="w-full hidden md:block lg:col-start-3 lg:row-start-4"
-            size="lg"
-            disabled={isSubmitting || !canWrite}
-            title={!canWrite ? 'Du har endast läsbehörighet i detta företag' : undefined}
-          >
-            {!canWrite && <Lock className="mr-2 h-4 w-4 inline" />}
-            Granska & skapa
-          </Button>
+            {/* Actions — desktop/tablet only */}
+            <Button
+              type="submit"
+              className="w-full hidden md:block"
+              size="lg"
+              disabled={isSubmitting || !canWrite}
+              title={!canWrite ? 'Du har endast läsbehörighet i detta företag' : undefined}
+            >
+              {!canWrite && <Lock className="mr-2 h-4 w-4 inline" />}
+              Granska & skapa
+            </Button>
+          </div>
         </div>
 
         {/* Mobile sticky total bar */}