fix(#103): capability-hidden tiles staying visible (CSS specificity bug)

Root cause: my new flex-fill rule

  #charts-grid .grid-stack-item-content { display: flex; ... }

has higher specificity (0,1,2,0) than Tailwind's .hidden utility
(0,0,1,0) and was winning the cascade. So when applyCapabilities()
correctly added .hidden to capability-not-installed cards (caddy /
traefik / nginx / apache on a HAProxy-only host like light-hugger),
the display: flex from my rule overrode display: none from .hidden
— the cards stayed visible with their titles + empty chart areas.

The agent's probes and the JS hide logic were both doing the right
thing the whole time; the override was silent because dev-tools'
computed-style panel just shows "display: flex" without flagging
which rule it lost to.

Fix: scope the flex-fill rule with :not(.hidden) so .hidden wins
the cascade for capability-hidden cards. Now display: none kicks
in as intended, the tile vanishes visually, and the container-
height recompute brings the bottom edge up to whatever the last
*visible* tile ends — no more ghost slots reserving space below
the layout.

Same bug would have hit no-HAProxy hosts (the HAProxy cards
would stay visible despite haproxyAvailable=false). Catching it
before that footgun lands in front of a real user.

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

Author: sarg3nt

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

@@ -454,8 +454,12 @@ templ Metrics(user *models.User, servers []models.BoxConfig) {
 		   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. */
-		#charts-grid .grid-stack-item-content {
+		   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. */
+		#charts-grid .grid-stack-item-content:not(.hidden) {
 			display: flex;
 			flex-direction: column;
 			height: 100%;