0.10.2-11 ---

frontend/src/pages/DashboardPage.jsx

@@ -2900,11 +2900,24 @@ export default function DashboardPage({
                             GPU {gpu?.index ?? index}
                             {gpu?.name ? ` | ${gpu.name}` : ''}
                           </strong>
-                          <small>Load: {formatPercent(gpu?.utilizationPercent)}</small>
+                          <span className="hardware-gpu-chip" title="GPU Load">
-                          <small>Mem-Load: {formatPercent(gpu?.memoryUtilizationPercent)}</small>
+                            <i className="pi pi-chart-line" />{formatPercent(gpu?.utilizationPercent)}
-                          <small>Temp: {formatTemperature(gpu?.temperatureC)}</small>
+                          </span>
-                          <small>VRAM: {formatBytes(gpu?.memoryUsedBytes)} / {formatBytes(gpu?.memoryTotalBytes)}</small>
+                          <span className="hardware-gpu-chip" title="Speicher-Load">
-                          <small>Power: {Number.isFinite(Number(gpu?.powerDrawW)) ? `${gpu.powerDrawW} W` : 'n/a'} / {Number.isFinite(Number(gpu?.powerLimitW)) ? `${gpu.powerLimitW} W` : 'n/a'}</small>
+                            <i className="pi pi-chart-pie" />{formatPercent(gpu?.memoryUtilizationPercent)}
+                          </span>
+                          <span className="hardware-gpu-chip" title="Temperatur">
+                            <i className="pi pi-bolt" />{formatTemperature(gpu?.temperatureC)}
+                          </span>
+                          <span className="hardware-gpu-chip" title="VRAM">
+                            <i className="pi pi-database" />{formatBytes(gpu?.memoryUsedBytes)} / {formatBytes(gpu?.memoryTotalBytes)}
+                          </span>
+                          <span className="hardware-gpu-chip" title="Power">
+                            <i className="pi pi-flash" />
+                            {Number.isFinite(Number(gpu?.powerDrawW)) ? `${gpu.powerDrawW} W` : 'n/a'}
+                            {' / '}
+                            {Number.isFinite(Number(gpu?.powerLimitW)) ? `${gpu.powerLimitW} W` : 'n/a'}
+                          </span>
                         </div>
                       ))}
                     </div>

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