From a8b1aadb1cc70720f278142c295398a841137be9 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Tue, 14 Apr 2026 01:18:41 -0400
Subject: [PATCH] style: reorganize action buttons in StatusPage for improved
 layout and accessibility

---
 src/app/components/StatusPage.tsx | 71 ++++++++++++++++---------------
 1 file changed, 36 insertions(+), 35 deletions(-)

diff --git a/src/app/components/StatusPage.tsx b/src/app/components/StatusPage.tsx
index 428532f..db4027a 100644
--- a/src/app/components/StatusPage.tsx
+++ b/src/app/components/StatusPage.tsx
@@ -68,20 +68,7 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
       <h2 className="text-sm text-neutral-500">System Status</h2>
 
       <div className="bg-white border border-neutral-200 rounded-lg p-4">
-        <div className="flex gap-2 mb-4">
-          <button
-            className="flex items-center gap-2 px-3 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-sm font-medium"
-            onClick={() => { setShowResetModal('meatloaf'); setResetStatus('idle'); }}
-          >
-            <RefreshCw className="w-4 h-4" /> Reset Meatloaf
-          </button>
-          <button
-            className="flex items-center gap-2 px-3 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-sm font-medium"
-            onClick={() => { setShowResetModal('host'); setResetStatus('idle'); }}
-          >
-            <RefreshCw className="w-4 h-4" /> Reset Host
-          </button>
-        </div>
+        {/* System Status Action Buttons at bottom */}
         <div className="mb-4">
           <div className="text-xs text-neutral-500 mb-1">Memory Utilization</div>
           <div className="flex flex-col gap-2">
@@ -135,6 +122,20 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
             </div>
           </div>
         </div>
+        <div className="flex flex-col gap-2 mt-6">
+          <button
+            className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-base font-medium w-full"
+            onClick={() => { setShowResetModal('meatloaf'); setResetStatus('idle'); }}
+          >
+            <RefreshCw className="w-5 h-5" /> Reset Meatloaf
+          </button>
+          <button
+            className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-blue-600 text-white hover:bg-blue-700 transition text-base font-medium w-full"
+            onClick={() => { setShowResetModal('host'); setResetStatus('idle'); }}
+          >
+            <RefreshCw className="w-5 h-5" /> Reset Host
+          </button>
+        </div>
       </div>
 
       {activeDevice && (
@@ -157,21 +158,7 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
               <div className="w-2 h-2 rounded-full bg-green-500" />
             </div>
 
-            {/* Directory and Disk Map buttons */}
-            <div className="flex gap-2 mb-4">
-              <button
-                className="flex items-center gap-2 px-3 py-2 rounded bg-neutral-200 text-neutral-700 hover:bg-blue-600 hover:text-white transition text-sm font-medium"
-                onClick={() => setShowDirectory(true)}
-              >
-                <FolderOpen className="w-4 h-4" /> Show Directory
-              </button>
-              <button
-                className="flex items-center gap-2 px-3 py-2 rounded bg-neutral-200 text-neutral-700 hover:bg-blue-600 hover:text-white transition text-sm font-medium"
-                onClick={() => setShowDiskMap(true)}
-              >
-                <Map className="w-4 h-4" /> Show Disk Map
-              </button>
-            </div>
+            {/* Directory and Disk Map buttons at bottom */}
 
             {/* New device info cards */}
             <div className="mb-4">
@@ -249,6 +236,20 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
                 </div>
               );
             })()}
+            <div className="flex flex-col gap-2 mt-6">
+              <button
+                className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-neutral-200 text-neutral-700 hover:bg-blue-600 hover:text-white transition text-base font-medium w-full"
+                onClick={() => setShowDirectory(true)}
+              >
+                <FolderOpen className="w-5 h-5" /> Show Directory
+              </button>
+              <button
+                className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-neutral-200 text-neutral-700 hover:bg-blue-600 hover:text-white transition text-base font-medium w-full"
+                onClick={() => setShowDiskMap(true)}
+              >
+                <Map className="w-5 h-5" /> Show Disk Map
+              </button>
+            </div>
           </div>
 
           {showDeviceOverlay && (
@@ -275,12 +276,12 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
           {showDirectory && (
             <div className="fixed inset-0 z-50 flex items-center justify-center">
               <div className="absolute inset-0 bg-black/40 backdrop-blur-md" onClick={() => setShowDirectory(false)} />
-              <div className="relative w-full h-full max-w-2xl sm:rounded-xl bg-white/90 shadow-2xl overflow-auto flex flex-col justify-center mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0" style={{ maxHeight: '100dvh' }}>
+              <div className="relative w-full h-full max-w-2xl sm:rounded-xl bg-white/90 shadow-2xl overflow-auto flex flex-col mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0" style={{ maxHeight: '100dvh' }}>
                 <div className="flex items-center justify-between p-4 border-b">
                   <h2 className="text-xl font-medium">Directory</h2>
-                  <button onClick={() => setShowDirectory(false)} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg"><X className="w-6 h-6" /></button>
+                  <button onClick={() => setShowDirectory(false)} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg"><svg xmlns='http://www.w3.org/2000/svg' className='w-6 h-6' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' /></svg></button>
                 </div>
-                <div className="flex-1 overflow-auto">
+                <div className="flex-1 overflow-auto p-4">
                   <FileBrowser currentPath={activeDevice.url ? activeDevice.url.replace(/\/[^/]+$/, '') : '/'} onSelect={() => {}} onClose={() => setShowDirectory(false)} />
                 </div>
               </div>
@@ -291,12 +292,12 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
           {showDiskMap && (
             <div className="fixed inset-0 z-50 flex items-center justify-center">
               <div className="absolute inset-0 bg-black/40 backdrop-blur-md" onClick={() => setShowDiskMap(false)} />
-              <div className="relative w-full h-full max-w-2xl sm:rounded-xl bg-white/90 shadow-2xl overflow-auto flex flex-col justify-center mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0" style={{ maxHeight: '100dvh' }}>
+              <div className="relative w-full h-full max-w-2xl sm:rounded-xl bg-white/90 shadow-2xl overflow-auto flex flex-col mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0" style={{ maxHeight: '100dvh' }}>
                 <div className="flex items-center justify-between p-4 border-b">
                   <h2 className="text-xl font-medium">Disk Map</h2>
-                  <button onClick={() => setShowDiskMap(false)} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg"><X className="w-6 h-6" /></button>
+                  <button onClick={() => setShowDiskMap(false)} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg"><svg xmlns='http://www.w3.org/2000/svg' className='w-6 h-6' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' /></svg></button>
                 </div>
-                <div className="flex-1 overflow-auto flex items-center justify-center text-neutral-500">
+                <div className="flex-1 overflow-auto flex items-center justify-center text-neutral-500 p-4">
                   <span>Disk map visualization goes here.</span>
                 </div>
               </div>