From 126aa073edd2d9f7c596c6aa7136b6ac2a820e63 Mon Sep 17 00:00:00 2001
From: Jakob Wennberg <149234542+jakobwennberg@users.noreply.github.com>
Date: Thu, 14 May 2026 11:49:32 +0200
Subject: [PATCH] fix(ui): balance invoice/new columns; center salary run form
 (#476)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

invoices/new — Fakturadetaljer (5+ fields) is much taller than Kund
(a single dropdown), so the prior layout (Fakturarader full-width,
Fakturadetaljer alone in row 1) left a large empty gap below Kund.

- Fakturarader: lg:col-span-3 → lg:col-span-2 (left side only)
- Fakturadetaljer: add lg:row-span-2 so it parallels the
  Kund + Fakturarader stack on the left

Anteckningar / Summering alignment from the prior PR is preserved
(both still at row-start-3).

salary/runs/new — form was max-w-xl, left-aligned. Felt cramped on
the wide content area.

- Outer container: add max-w-2xl mx-auto (centered, slightly wider)
- Drop the form's now-redundant max-w-xl

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/(dashboard)/invoices/new/page.tsx    | 4 ++--
 app/(dashboard)/salary/runs/new/page.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/(dashboard)/invoices/new/page.tsx b/app/(dashboard)/invoices/new/page.tsx
index 3fd14ea2..d13340ef 100644
--- a/app/(dashboard)/invoices/new/page.tsx
+++ b/app/(dashboard)/invoices/new/page.tsx
@@ -517,7 +517,7 @@ export default function NewInvoicePage() {
           </Card>
 
           {/* Invoice items */}
-          <Card className="lg:col-span-3 lg:row-start-2">
+          <Card className="lg:col-span-2 lg:row-start-2">
             <CardHeader>
               <CardTitle>Fakturarader</CardTitle>
               <CardDescription>Lägg till produkter eller tjänster</CardDescription>
@@ -682,7 +682,7 @@ export default function NewInvoicePage() {
           </Card>
 
           {/* Invoice details */}
-          <Card className="lg:col-start-3 lg:row-start-1">
+          <Card className="lg:col-start-3 lg:row-start-1 lg:row-span-2">
             <CardHeader>
               <CardTitle>Fakturadetaljer</CardTitle>
             </CardHeader>
diff --git a/app/(dashboard)/salary/runs/new/page.tsx b/app/(dashboard)/salary/runs/new/page.tsx
index ae2b4f0d..97e47090 100644
--- a/app/(dashboard)/salary/runs/new/page.tsx
+++ b/app/(dashboard)/salary/runs/new/page.tsx
@@ -56,7 +56,7 @@ export default function NewSalaryRunPage() {
   }
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-8 max-w-2xl mx-auto">
       <div className="flex items-center gap-3">
         <Button variant="ghost" size="icon" asChild>
           <Link href="/salary" aria-label="Tillbaka till löner"><ArrowLeft className="h-4 w-4" /></Link>
@@ -64,7 +64,7 @@ export default function NewSalaryRunPage() {
         <h1 className="font-display text-2xl md:text-3xl font-medium tracking-tight">Ny lönekörning</h1>
       </div>
 
-      <form onSubmit={handleSubmit} className="space-y-6 max-w-xl">
+      <form onSubmit={handleSubmit} className="space-y-6">
         <Card>
           <CardHeader>
             <CardTitle className="text-base">Period och utbetalning</CardTitle>