From ef48b167b0b7c84c634ba8c39e0c755aea89b079 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Wed, 17 Jun 2026 11:49:45 -0400
Subject: [PATCH] feat(DeviceDetailOverlay): add close button and improve
 header layout

---
 src/app/components/DeviceDetailOverlay.tsx | 26 +++++++++++-----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/app/components/DeviceDetailOverlay.tsx b/src/app/components/DeviceDetailOverlay.tsx
index e314980..692886e 100644
--- a/src/app/components/DeviceDetailOverlay.tsx
+++ b/src/app/components/DeviceDetailOverlay.tsx
@@ -394,6 +394,14 @@ export default function DeviceDetailOverlay({
           {/* ── Header ── */}
           <div className="flex-shrink-0 border-b border-neutral-200/70 relative">
             <div className="flex items-center gap-3 px-4 py-3">
+              <button
+                onClick={onClose}
+                className="p-1.5 my-1.5 rounded-lg hover:bg-neutral-100 text-neutral-500 transition-colors flex-shrink-0"
+                aria-label="Close"
+              >
+                <X className="w-5 h-5" />
+              </button>
+
               <div className={`flex flex-col items-center gap-0.5 flex-shrink-0 ${
                 activeDevice.physical ? 'text-green-600' : activeDevice.enabled ? 'text-blue-600' : 'text-neutral-400'
               }`}>
@@ -413,19 +421,11 @@ export default function DeviceDetailOverlay({
                 <p className="text-xs text-neutral-400 capitalize">{activeDevice.type}</p>
               </div>
 
-              <div className="flex items-center gap-1 flex-shrink-0">
-                {devices.length > 1 && (
-                  <span className="text-xs text-neutral-400 tabular-nums px-1">
-                    {activeIndex + 1} / {devices.length}
-                  </span>
-                )}
-                <button
-                  onClick={onClose}
-                  className="p-1.5 rounded-lg hover:bg-neutral-100 text-neutral-500 transition-colors"
-                >
-                  <X className="w-5 h-5" />
-                </button>
-              </div>
+              {devices.length > 1 && (
+                <span className="text-xs text-neutral-400 tabular-nums px-1 flex-shrink-0">
+                  {activeIndex + 1} / {devices.length}
+                </span>
+              )}
             </div>
 
           </div>