diff --git a/frontend/src/pages/DashboardPage.jsx b/frontend/src/pages/DashboardPage.jsx index a94f065..208bdc2 100644 --- a/frontend/src/pages/DashboardPage.jsx +++ b/frontend/src/pages/DashboardPage.jsx @@ -2900,11 +2900,24 @@ export default function DashboardPage({ GPU {gpu?.index ?? index} {gpu?.name ? ` | ${gpu.name}` : ''} - Load: {formatPercent(gpu?.utilizationPercent)} - Mem-Load: {formatPercent(gpu?.memoryUtilizationPercent)} - Temp: {formatTemperature(gpu?.temperatureC)} - VRAM: {formatBytes(gpu?.memoryUsedBytes)} / {formatBytes(gpu?.memoryTotalBytes)} - Power: {Number.isFinite(Number(gpu?.powerDrawW)) ? `${gpu.powerDrawW} W` : 'n/a'} / {Number.isFinite(Number(gpu?.powerLimitW)) ? `${gpu.powerLimitW} W` : 'n/a'} + + {formatPercent(gpu?.utilizationPercent)} + + + {formatPercent(gpu?.memoryUtilizationPercent)} + + + {formatTemperature(gpu?.temperatureC)} + + + {formatBytes(gpu?.memoryUsedBytes)} / {formatBytes(gpu?.memoryTotalBytes)} + + + + {Number.isFinite(Number(gpu?.powerDrawW)) ? `${gpu.powerDrawW} W` : 'n/a'} + {' / '} + {Number.isFinite(Number(gpu?.powerLimitW)) ? `${gpu.powerLimitW} W` : 'n/a'} + ))} diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css index 5587f7b..dd45815 100644 --- a/frontend/src/styles/app.css +++ b/frontend/src/styles/app.css @@ -395,11 +395,11 @@ body { flex-direction: row; flex-wrap: nowrap; gap: 0.75rem; - align-items: start; + align-items: stretch; } .hardware-monitor-grid > .hardware-monitor-block { - flex: 1 1 0; + flex: 0 0 calc(33.333% - 0.5rem); min-width: 0; } @@ -565,6 +565,32 @@ body { gap: 0.15rem; } +.hardware-gpu-item { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.25rem 0.35rem; +} + +.hardware-gpu-item strong { + flex: 0 0 100%; + font-size: 0.82rem; +} + +.hardware-gpu-chip { + display: inline-flex; + align-items: center; + gap: 0.28rem; + border: 1px solid var(--rip-border); + border-radius: 999px; + background: var(--rip-panel-soft); + padding: 0.18rem 0.42rem; + font-size: 0.75rem; + font-weight: 600; + white-space: nowrap; + color: var(--rip-brown-800); +} + .hardware-storage-item.compact { gap: 0.3rem; }