feat(frontend): adapt hardware cards to vertical space

The hardware cards only adapted to horizontal space, so on short viewports the
square gauges and trend charts overflowed and broke the one-pager. Measure the
available vertical space with a ResizeObserver and degrade gracefully:

- New `useElementSize` hook (ResizeObserver, SSR/jsdom-safe).
- New `HBar` component: a compact horizontal-bar gauge mirroring `ArcGauge`'s
  data API (single value+threshold, or stacked segments + legend).
- When per-card height is tight, each hardware card drops its line chart and
  swaps its arc gauge for an `HBar` (Memory becomes a stacked segmented bar);
  value-only cards (Clock/Disk/Network) keep their readouts without the chart.
  The CPU core heatmap is dropped in this mode too, alongside the line charts.
- When the dashboard content height is very short, the engine section also
  drops its per-metric trend charts so it stops crowding the hardware grid
  off-screen.

Both decisions key off measured, content-independent heights (per-card height
for the hardware swap, root height for the engine charts) so they can't
feedback-loop. Verified across 1050/800/620/520px viewports via a throwaway
Playwright preview. Adds HBar unit tests.

Author: niklasfrick

frontend/src/__tests__/HBar.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { HBar } from '../components/gauges/HBar'
+import type { GaugeSegment } from '../components/gauges/ArcGauge'
+
+describe('HBar', () => {
+  it('renders a single value with label and unit', () => {
+    render(<HBar value={42} label="GPU Util" unit="%" />)
+    expect(screen.getByText('GPU Util')).toBeTruthy()
+    expect(screen.getByText('42')).toBeTruthy()
+    expect(screen.getByText('%')).toBeTruthy()
+  })
+
+  it('fills the bar proportionally to value/max', () => {
+    render(<HBar value={30} max={120} label="X" unit="W" />)
+    const fill = screen.getByTestId('hbar-fill') as HTMLElement
+    // 30/120 = 25%
+    expect(fill.style.width).toBe('25%')
+  })
+
+  it('clamps the fill width to [0, 100]%', () => {
+    render(<HBar value={500} max={100} label="X" unit="%" />)
+    expect((screen.getByTestId('hbar-fill') as HTMLElement).style.width).toBe('100%')
+  })
+
+  it('prefers displayValue over value for the readout', () => {
+    render(<HBar value={75} displayValue={150} label="GPU Power" unit="W" />)
+    expect(screen.getByText('150')).toBeTruthy()
+  })
+
+  it('renders stacked segments with a legend and no single-value fill', () => {
+    // Mirrors how the Memory card calls it: an explicit `value` (used %) plus
+    // segments for the stacked breakdown.
+    const segments: GaugeSegment[] = [
+      { value: 25, total: 100, color: '#76B900', label: 'GPU: 25' },
+      { value: 25, total: 100, color: '#3B82F6', label: 'CPU: 25' },
+      { value: 50, total: 100, color: '#27272A', label: 'Free: 50' },
+    ]
+    render(<HBar value={50} label="" unit="%" segments={segments} />)
+    // No single-value fill is rendered in segment mode.
+    expect(screen.queryByTestId('hbar-fill')).toBeNull()
+    // Legend labels present.
+    expect(screen.getByText('GPU: 25')).toBeTruthy()
+    expect(screen.getByText('Free: 50')).toBeTruthy()
+    // Readout uses the explicit value (used %), matching ArcGauge precedence.
+    expect(screen.getByText('50')).toBeTruthy()
+  })
+})

frontend/src/components/gauges/HBar.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import { NVIDIA_THEME, thresholdColor } from '@/lib/theme'
+import type { GaugeSegment } from './ArcGauge'
+
+interface HBarProps {
+  value?: number
+  max?: number
+  label: string
+  unit: string
+  thresholds?: { warning: number; critical: number }
+  /** Override the displayed number (e.g. show watts instead of percentage). */
+  displayValue?: number
+  /** When provided, renders a stacked multi-segment bar with a legend. */
+  segments?: GaugeSegment[]
+}
+
+/**
+ * Compact horizontal-bar alternative to {@link ArcGauge}, used by the hardware
+ * cards when vertical space is too tight for a square gauge. Accepts the same
+ * data shape (single value+threshold, or stacked segments) so a card can swap
+ * between the two without reshaping its props.
+ */
+export const HBar = React.memo(function HBar({
+  value,
+  max = 100,
+  label,
+  unit,
+  thresholds,
+  displayValue,
+  segments,
+}: HBarProps) {
+  const segs = segments?.filter((s) => s.value > 0 && s.total > 0) ?? []
+
+  const centerValue = (() => {
+    if (displayValue !== undefined) return Math.round(displayValue)
+    if (value !== undefined) return Math.round(value)
+    if (segs.length > 0) {
+      const total = segs[0].total
+      if (total === 0) return 0
+      const used = segs.filter((s) => s.label !== 'Free').reduce((sum, s) => sum + s.value, 0)
+      return Math.round((used / total) * 100)
+    }
+    return 0
+  })()
+
+  return (
+    <div className="flex flex-col gap-0.5 lg:gap-1 w-full min-w-0">
+      <div className="flex items-baseline gap-2 min-w-0">
+        {label && (
+          <span className="text-[9px] lg:text-[10px] text-zinc-400 uppercase tracking-wider truncate min-w-0">
+            {label}
+          </span>
+        )}
+        <span className="ml-auto shrink-0 font-mono font-bold tabular-nums text-xs lg:text-sm 2xl:text-base text-zinc-100 leading-none">
+          {centerValue}
+          <span className="ml-0.5 text-[9px] lg:text-[10px] text-zinc-500">{unit}</span>
+        </span>
+      </div>
+      <div className="flex h-1.5 lg:h-2 w-full rounded-full overflow-hidden bg-zinc-700/40">
+        {segs.length > 0 ? (
+          segs.map((seg, i) => (
+            <div
+              key={i}
+              className="h-full transition-all duration-500"
+              style={{ width: `${Math.min(100, (seg.value / seg.total) * 100)}%`, backgroundColor: seg.color }}
+            />
+          ))
+        ) : (
+          (() => {
+            const v = value ?? 0
+            const percent = Math.min(Math.max(v / max, 0), 1) * 100
+            const color = thresholds
+              ? thresholdColor(v, thresholds.warning, thresholds.critical)
+              : NVIDIA_THEME.accent
+            return (
+              <div
+                className="h-full transition-all duration-500"
+                style={{ width: `${percent}%`, backgroundColor: color }}
+                data-testid="hbar-fill"
+              />
+            )
+          })()
+        )}
+      </div>
+      {segs.length > 0 && (
+        <div className="flex flex-wrap gap-x-1.5 gap-y-0.5">
+          {segs.map((seg, i) => (
+            <div key={i} className="flex items-center gap-0.5 min-w-0">
+              <span className="inline-block w-1 h-1 rounded-full shrink-0" style={{ backgroundColor: seg.color }} />
+              <span className="text-[8px] lg:text-[9px] text-zinc-300 truncate">{seg.label}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+})