Further Improvements to the Devices Menu

frontend/src/devices/DeviceDetail.jsx

@@ -298,7 +298,8 @@ export default function DeviceDetail() {
         )}
       </div>
 
-      <div className="grid gap-6 items-start" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 480px), 1fr))" }}>
+      {/* Masonry layout for single-width sections */}
+      <div className="device-sections">
         {/* Basic Information */}
         <SectionCard title="Basic Information">
           <div className="space-y-4">
@@ -510,7 +511,12 @@ export default function DeviceDetail() {
           )}
         </SectionCard>
 
-        {/* Device Settings */}
+        {/* Equipment Notes */}
+        <NotesPanel deviceId={id} />
+      </div>
+
+      {/* Device Settings — full width, outside masonry flow */}
+      <div className="mt-6">
         <SectionCard title="Device Settings">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
             {/* Left Column */}
@@ -612,9 +618,6 @@ export default function DeviceDetail() {
             </div>
           </div>
         </SectionCard>
-
-        {/* Equipment Notes */}
-        <NotesPanel deviceId={id} />
       </div>
 
       <ConfirmDialog