fix(invoices/new): revert grid row alignment, restore 2-col stacking (#477)

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

@@ -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 */}