idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(DeviceDetailOverlay): add close button and improve header layout

Browse Source
This commit is contained in:
Jaime Idolpx 2026-06-17 11:49:45 -04:00
parent afd7156a36
commit ef48b167b0
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/components/DeviceDetailOverlay.tsx
View File

@ -394,6 +394,14 @@ export default function DeviceDetailOverlay({
{/* ── Header ── */} {/* ── Header ── */}
<div className="flex-shrink-0 border-b border-neutral-200/70 relative"> <div className="flex-shrink-0 border-b border-neutral-200/70 relative">
<div className="flex items-center gap-3 px-4 py-3"> <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 ${ <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' 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> <p className="text-xs text-neutral-400 capitalize">{activeDevice.type}</p>
</div> </div>
<div className="flex items-center gap-1 flex-shrink-0"> {devices.length > 1 && (
{devices.length > 1 && ( <span className="text-xs text-neutral-400 tabular-nums px-1 flex-shrink-0">
<span className="text-xs text-neutral-400 tabular-nums px-1"> {activeIndex + 1} / {devices.length}
{activeIndex + 1} / {devices.length} </span>
</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>
</div> </div>
</div> </div>