From 9daf1578a7c56a77f4d433776ece69f63d81f576 Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Sun, 12 Jul 2026 13:41:18 -0400
Subject: [PATCH] Balance the two-column card layout on detail pages

The content grid hand-assigned cards to a fixed left/right split, so a
PC or machine with many tall cards (installed apps, warranty,
relationships) piled them all on one side. Switched .content-grid to a
balanced CSS multicolumn flow (display:contents flattens the wrappers
so no markup changes), with break-inside:avoid keeping cards intact.
Cards now distribute by height and the columns stay even on every asset
detail page.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/assets/style.css | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/assets/style.css b/frontend/src/assets/style.css
index 2fcbcdd..890d657 100644
--- a/frontend/src/assets/style.css
+++ b/frontend/src/assets/style.css
@@ -1051,17 +1051,19 @@ td.actions {
 }
 
 /* Content Grid */
+/* Balanced two-column card flow. Uses CSS multicol (not a hand-assigned
+   grid) so cards distribute by height and the columns stay even no matter
+   how many cards land on either side. display:contents flattens the two
+   .content-column wrappers so their cards flow directly into the columns,
+   which keeps the existing markup unchanged. */
 .content-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 25px;
+  column-count: 2;
+  column-gap: 25px;
   margin-bottom: 25px;
 }
 
 .content-column {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
+  display: contents;
 }
 
 /* Section Cards */
@@ -1070,6 +1072,10 @@ td.actions {
   border-radius: 0.25rem;
   padding: 1.25rem;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  /* multicol needs per-card spacing (column-gap is horizontal only) and
+     must not split a card across the column break */
+  margin-bottom: 25px;
+  break-inside: avoid;
 }
 
 .section-title {
@@ -1484,7 +1490,7 @@ td.actions {
   }
 
   .content-grid {
-    grid-template-columns: 1fr;
+    column-count: 1;
   }
 
   .audit-footer {