From a016753bb6895c5a8926433ae6fb2f8fd1afbd32 Mon Sep 17 00:00:00 2001
From: "benjamin.baker" <benjamin.baker@geaerospace.com>
Date: Tue, 1 Sep 2026 15:46:18 -0400
Subject: [PATCH] Update shared styles, panels, naming hook, and ignore rules

Supporting changes for the monitor/drift work: shared panel styling for the new warning state, a naming-hook tweak, and gitignore entries for editor state (.vs/) and scratch capture files (pt*.txt) so they stay out of version control.
---
 .gitignore                                    |  4 +++
 frontend/src/assets/style.css                 | 27 +++++++++++++------
 frontend/src/components/PluginAssetPanels.vue |  8 +++---
 scripts/check-naming-and-style.sh             |  2 ++
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/.gitignore b/.gitignore
index f2e77ab6..31591d72 100644
--- a/.gitignore
+++ b/.gitignore
@@ -132,9 +132,13 @@ docker_build.txt
 docker_up.txt
 gates_out.txt
 pytest_targeted.txt
+pt*.txt
 alandry.py
 kendry.py
 
+# Visual Studio local editor state (not product source).
+.vs/
+
 # Scratch tooling under scripts/ (catalog diff/merge helpers, docx generator).
 # Not product source; developer-local utilities.
 scripts/.temp/
diff --git a/frontend/src/assets/style.css b/frontend/src/assets/style.css
index 7cf95e64..18bd2c44 100644
--- a/frontend/src/assets/style.css
+++ b/frontend/src/assets/style.css
@@ -1068,17 +1068,28 @@ td.actions .btn + .btn {
 }
 
 /* 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. */
+/* Two-column card layout on an explicit CSS grid rather than multicol.
+   Multicol was abandoned because a child using column-span: all (the full
+   width Network Interfaces panel) overlaps the shorter column above it when
+   the two columns have unequal heights - a known multicol spanning bug. Grid
+   has no such flaw: short fact cards sit two-up and a full-width panel spans
+   both tracks cleanly via .pap-span. display:contents flattens the two
+   .content-column wrappers so their cards become direct grid items, which
+   keeps the existing markup unchanged. */
 .content-grid {
-  column-count: 2;
-  column-gap: 25px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 25px;
+  align-items: start;
   margin-bottom: 25px;
 }
 
+/* Grid supplies the gap; the per-card margin was a multicol-only crutch and
+   would otherwise double the vertical spacing. */
+.content-grid > .section-card {
+  margin-bottom: 0;
+}
+
 .content-column {
   display: contents;
 }
@@ -1522,7 +1533,7 @@ td.actions .btn + .btn {
   }
 
   .content-grid {
-    column-count: 1;
+    grid-template-columns: 1fr;
   }
 
   .audit-footer {
diff --git a/frontend/src/components/PluginAssetPanels.vue b/frontend/src/components/PluginAssetPanels.vue
index 9782f2af..aba66951 100644
--- a/frontend/src/components/PluginAssetPanels.vue
+++ b/frontend/src/components/PluginAssetPanels.vue
@@ -447,13 +447,13 @@ defineExpose({ refresh: load, populatedGroups })
    Network interfaces is the case that forced this: adapter, address, MAC,
    speed and state at half page width either squeezed every cell to three
    lines or handed the reader a horizontal scrollbar, and a scrollbar for
-   data that simply needs room is a layout failure, not a feature. column-span
-   is the multi-column layout's own answer, so the short fact cards stay two-up
-   around it.
+   data that simply needs room is a layout failure, not a feature. The parent
+   .content-grid is a CSS grid, so grid-column: 1 / -1 makes the panel span
+   every track while the short fact cards stay two-up around it.
 
    The wrapper keeps overflow-x as a floor for the genuinely too-wide case on
    a narrow viewport, where nothing else can help. */
-.pap-span { column-span: all; }
+.pap-span { grid-column: 1 / -1; }
 .pap-table-wrap { overflow-x: auto; max-width: 100%; }
 .pap-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
 .pap-table th, .pap-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); }
diff --git a/scripts/check-naming-and-style.sh b/scripts/check-naming-and-style.sh
index 8b61831d..133f8620 100755
--- a/scripts/check-naming-and-style.sh
+++ b/scripts/check-naming-and-style.sh
@@ -21,6 +21,8 @@ VIOLATIONS=0
 
 EXCLUDES=(
     --exclude-dir=venv
+    --exclude-dir=env
+    --exclude-dir=.venv
     --exclude-dir=node_modules
     --exclude-dir=__pycache__
     --exclude-dir=dist