Changed the Device Info lines

This commit is contained in:
2026-02-18 15:06:52 +02:00
parent cc59622378
commit 15021734b2

View File

@@ -301,22 +301,26 @@ export default function DeviceDetail() {
<div className="grid gap-6 items-start" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 480px), 1fr))" }}>
{/* Basic Information */}
<SectionCard title="Basic Information">
<dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }}>
<Field label="Serial Number">
<span className="font-mono">{device.device_id}</span>
</Field>
<Field label="Status">
<BoolBadge value={isOnline} yesLabel="Online" noLabel="Offline" />
{mqttStatus && (
<span className="ml-2 text-xs" style={{ color: "var(--text-muted)" }}>
(MQTT {mqttStatus.seconds_since_heartbeat}s ago)
</span>
)}
</Field>
<Field label="Document ID">
<span className="font-mono text-xs" style={{ color: "var(--text-muted)" }}>{device.id}</span>
</Field>
</dl>
<div className="space-y-4">
<dl>
<Field label="Status">
<BoolBadge value={isOnline} yesLabel="Online" noLabel="Offline" />
{mqttStatus && (
<span className="ml-2 text-xs" style={{ color: "var(--text-muted)" }}>
(MQTT {mqttStatus.seconds_since_heartbeat}s ago)
</span>
)}
</Field>
</dl>
<dl className="grid gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))" }}>
<Field label="Serial Number">
<span className="font-mono">{device.device_id}</span>
</Field>
<Field label="Document ID">
<span className="font-mono text-xs" style={{ color: "var(--text-muted)" }}>{device.id}</span>
</Field>
</dl>
</div>
</SectionCard>
{/* Misc */}