From ec072a3a46533c6e19fbfb632879f0588118ea59 Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Thu, 20 Nov 2025 17:24:50 +0100
Subject: [PATCH] fix: Fix component ordering during reboots in failsafe mode

---
 ui/src/routes/devices.$id.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/ui/src/routes/devices.$id.tsx b/ui/src/routes/devices.$id.tsx
index 1cc28a1b..c3f2c9cc 100644
--- a/ui/src/routes/devices.$id.tsx
+++ b/ui/src/routes/devices.$id.tsx
@@ -615,7 +615,7 @@ export default function KvmIdRoute() {
     });
   }, 10000);
 
-  const { setNetworkState  } = useNetworkStateStore();
+  const { setNetworkState } = useNetworkStateStore();
   const { setHdmiState } = useVideoStore();
   const {
     keyboardLedState, setKeyboardLedState,
@@ -815,6 +815,10 @@ export default function KvmIdRoute() {
       return <RebootingOverlay show={true} postRebootAction={rebootState.postRebootAction} />;
     }
 
+    if (isFailsafeMode && failsafeReason) {
+      return <FailSafeModeOverlay reason={failsafeReason} />;
+    }
+
     const hasConnectionFailed =
       connectionFailed || ["failed", "closed"].includes(peerConnectionState ?? "");
 
@@ -839,7 +843,7 @@ export default function KvmIdRoute() {
     }
 
     return null;
-  }, [location.pathname, rebootState?.isRebooting, rebootState?.postRebootAction, connectionFailed, peerConnectionState, peerConnection, setupPeerConnection, loadingMessage]);
+  }, [location.pathname, rebootState?.isRebooting, rebootState?.postRebootAction, isFailsafeMode, failsafeReason, connectionFailed, peerConnectionState, peerConnection, setupPeerConnection, loadingMessage]);
 
   return (
     <FeatureFlagProvider appVersion={appVersion}>
@@ -887,9 +891,7 @@ export default function KvmIdRoute() {
               className="animate-slideUpFade pointer-events-none absolute inset-0 flex items-center justify-center p-4"
             >
               <div className="relative h-full max-h-[720px] w-full max-w-[1280px] rounded-md">
-                {isFailsafeMode && failsafeReason ? (
-                  <FailSafeModeOverlay reason={failsafeReason} />
-                ) : !!ConnectionStatusElement && ConnectionStatusElement}
+                {!!ConnectionStatusElement && ConnectionStatusElement}
               </div>
             </div>
             <SidebarContainer sidebarView={sidebarView} />