fix(#103): match chart-grid spacing to the KPI band (12px both axes)

After the previous height:100% fix exposed the real margin
spacing, 48px vertical felt too generous compared to the KPI
band's tight 12px gap-3 grid directly above. Drop GridStack
margins to 6 on every side → 12px gap on both axes, matching
the KPI band exactly so the whole metrics page reads as one
consistently-spaced surface.

Verified via Chrome MCP after fix:
  horizontal gap between adjacent inner cards: 12px
  vertical gap between adjacent inner cards: 12px

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: sarg3nt

gearbox/static/js/metrics-layout.js

@@ -70,12 +70,11 @@
   // 12-column grid matches the templ's default coordinates (half-
   // width tiles are gs-w=6, the full-width Sessions tile is gs-w=12).
   //
-  // Asymmetric margins so rows breathe more than columns: chart
-  // axis labels live at the top/bottom of each tile so adjacent
-  // rows' visible content edges approach each other faster than
-  // adjacent columns. 24 top/bottom (= 48px between rows) +
-  // 12 left/right (= 24px between side-by-side) is the ratio that
-  // reads right after multiple feedback passes on PR #104.
+  // Margins set to 6 on every side → 12px visible gap between
+  // tiles on both axes. Matches the KPI band's Tailwind gap-3
+  // (12px) directly above the grid, so the whole metrics page
+  // reads as one consistently-spaced surface rather than two
+  // grids with different rhythms.
   //
   // ALSO: keep getCellHeight(false) (not cellHeight()) anywhere we
   // need the cell height — the bare cellHeight() getter side-
@@ -86,10 +85,10 @@
     {
       column: 12,
       cellHeight: 80,
-      marginTop: 24,
-      marginBottom: 24,
-      marginLeft: 12,
-      marginRight: 12,
+      marginTop: 6,
+      marginBottom: 6,
+      marginLeft: 6,
+      marginRight: 6,
       float: false,
       staticGrid: true, // read-only until edit mode toggles
       acceptWidgets: false,