From 8fbad0112e57f1530584ef770acd01f9fe7faa0f Mon Sep 17 00:00:00 2001
From: Marc Brooks <IDisposable@gmail.com>
Date: Mon, 8 Sep 2025 04:06:08 -0500
Subject: [PATCH] fix(ui): Don't render a button in a button (#782)

Gets rid of warning at initial page load.
---
 ui/src/components/Header.tsx  |  2 +-
 ui/src/components/KvmCard.tsx | 15 ++++++---------
 ui/src/main.tsx               |  1 +
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index a290114..a650693 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -103,7 +103,7 @@ export default function DashboardNavbar({
                     <hr className="h-[20px] w-px self-center border-none bg-slate-800/20 dark:bg-slate-300/20" />
                     <div className="relative inline-block text-left">
                       <Menu>
-                        <MenuButton className="h-full">
+                        <MenuButton as="div" className="h-full">
                           <Button className="flex h-full items-center gap-x-3 rounded-md border border-slate-800/20 bg-white px-2 py-1.5 dark:border-slate-600 dark:bg-slate-800 dark:text-white">
                             {picture ? (
                               <img
diff --git a/ui/src/components/KvmCard.tsx b/ui/src/components/KvmCard.tsx
index 7ef8712..ab34976 100644
--- a/ui/src/components/KvmCard.tsx
+++ b/ui/src/components/KvmCard.tsx
@@ -100,15 +100,12 @@ export default function KvmCard({
             )}
           </div>
           <Menu as="div" className="relative inline-block text-left">
-            <div>
-              <MenuButton
-                as={Button}
-                theme="light"
-                TrailingIcon={LuEllipsisVertical}
-                size="MD"
-              ></MenuButton>
-            </div>
-
+            <MenuButton
+              as={Button}
+              theme="light"
+              TrailingIcon={LuEllipsisVertical}
+              size="MD"
+            ></MenuButton>
             <MenuItems
               transition
               className="data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-leave:duration-75 data-enter:ease-out data-leave:ease-in"
diff --git a/ui/src/main.tsx b/ui/src/main.tsx
index 87b3b18..79ca671 100644
--- a/ui/src/main.tsx
+++ b/ui/src/main.tsx
@@ -116,6 +116,7 @@ if (isOnDevice) {
       path: "/",
       errorElement: <ErrorBoundary />,
       element: <DeviceRoute />,
+      HydrateFallback: () => <div className="p-4">Loading...</div>,
       loader: DeviceRoute.loader,
       children: [
         {