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>
