fix(#103): remove height:100% from inner card — was eating the row gap

Diagnosed via Chrome MCP direct DOM inspection. Three rules were
fighting over the inner card's size:

  GridStack vendor CSS  → position: absolute; top: 24px; bottom: 24px
  My rule on #charts-grid → height: 100%
  CSS spec when over-constrained → height wins

Resolved: inner ended up 320px tall (matching outer's full height)
anchored at top:24, so it extended 24px BELOW the outer's bottom —
exactly where the next row's outer begins. Visual result: zero gap
between adjacent rows' inner cards, no matter what margin value I
set on the GridStack init. That's why margins 18, 24, 36 all looked
identical — the cells were always butting up against each other.

Fix: drop the `height: 100%`. GridStack's inline top + bottom is
sufficient to size the absolute-positioned inner content (inner
height becomes outer_height − marginTop − marginBottom = 272px for
gs-h=4, leaving a 48px gap between rows that matches the configured
margins).

Verified via Chrome MCP after fix:
  inner height: 272 (was 320, was overrunning by 24)
  visible gap between row 0 inner bottom and row 4 inner top: 48px

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

Author: sarg3nt

gearbox/internal/framework/templates/pages/metrics.templ

@@ -449,20 +449,23 @@ templ Metrics(user *models.User, servers []models.BoxConfig) {
 			cursor: move;
 		}
 		/* Make each tile a flex column so the chart container can
-		   flex to fill the GridStack-controlled height instead of
-		   computing its own from the chart-aspect-container's
-		   padding-bottom trick (which was sized to viewport width
-		   and overflowed the tile). overflow:hidden clips any
-		   stragglers (legends, axis labels) that briefly extend past
-		   the bounds during GridStack resize transitions.
-		   :not(.hidden) is critical — without it this rule has
-		   higher specificity than Tailwind's .hidden (display:none)
-		   utility and wins the cascade, so capability-hidden cards
-		   stay visible. */
+		   flex to fill the GridStack-controlled vertical space
+		   (between top:marginTop and bottom:marginBottom set
+		   inline by GridStack). overflow:hidden clips any
+		   stragglers (legends, axis labels) that briefly extend
+		   past the bounds during GridStack resize transitions.
+		   :not(.hidden) keeps Tailwind's .hidden (display:none)
+		   winning the cascade for capability-hidden cards.
+		   IMPORTANT: do NOT set `height: 100%` here — GridStack's
+		   own inline `top` + `bottom` positioning already sizes
+		   the absolute-positioned inner content. height: 100%
+		   would over-constrain (height + top + bottom all set →
+		   height wins per CSS spec), making the inner extend
+		   marginBottom px past the outer's bottom and visually
+		   eat the vertical gap between rows. */
 		#charts-grid .grid-stack-item-content:not(.hidden) {
 			display: flex;
 			flex-direction: column;
-			height: 100%;
 			overflow: hidden;
 		}
 		/* Inside a GridStack tile, drop the percent-of-width