From 15021734b2a2be034a8b466c2384d235e43f25de Mon Sep 17 00:00:00 2001
From: bonamin <just_big_v@yahoo.com>
Date: Wed, 18 Feb 2026 15:06:52 +0200
Subject: [PATCH] Changed the Device Info lines

---
 frontend/src/devices/DeviceDetail.jsx | 36 +++++++++++++++------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/frontend/src/devices/DeviceDetail.jsx b/frontend/src/devices/DeviceDetail.jsx
index cc37642..dab9c86 100644
--- a/frontend/src/devices/DeviceDetail.jsx
+++ b/frontend/src/devices/DeviceDetail.jsx
@@ -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 */}