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;
}