fix(ui): Don't render a button in a button (#782)

Gets rid of warning at initial page load.

Author: IDisposable

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

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"

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: [
         {