From 61ef097da18ddfde114988814d257fb15983eb55 Mon Sep 17 00:00:00 2001
From: bonamin <just_big_v@yahoo.com>
Date: Wed, 18 Feb 2026 15:15:57 +0200
Subject: [PATCH] Further Improvements to the Devices Menu

---
 frontend/src/devices/DeviceDetail.jsx | 13 ++++++++-----
 frontend/src/index.css                | 20 ++++++++++++++++++++
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/frontend/src/devices/DeviceDetail.jsx b/frontend/src/devices/DeviceDetail.jsx
index dab9c86..be6f65a 100644
--- a/frontend/src/devices/DeviceDetail.jsx
+++ b/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
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0320a5b..9a79d09 100644
--- a/frontend/src/index.css
+++ b/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;