Changed the Device Info lines

frontend/src/devices/DeviceDetail.jsx

@@ -301,10 +301,8 @@ 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>
+          <div className="space-y-4">
+            <dl>
               <Field label="Status">
                 <BoolBadge value={isOnline} yesLabel="Online" noLabel="Offline" />
                 {mqttStatus && (
@@ -313,10 +311,16 @@ export default function DeviceDetail() {
                   </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 */}