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

frontend/src/index.css

@@ -145,6 +145,26 @@ input[type="range"]::-moz-range-thumb {
   border: 2px solid var(--bg-primary);
 }
 
+/* Device detail masonry layout */
+.device-sections {
+  columns: 1;
+  column-gap: 1.5rem;
+}
+.device-sections > * {
+  break-inside: avoid;
+  margin-bottom: 1.5rem;
+}
+@media (min-width: 900px) {
+  .device-sections {
+    columns: 2;
+  }
+}
+@media (min-width: 1800px) {
+  .device-sections {
+    columns: 3;
+  }
+}
+
 /* File input */
 input[type="file"]::file-selector-button {
   background-color: var(--bg-card) !important;