ensure the fullscreen countdown is always on top and not restricted to the parent bounds

packages/frontend/src/components/server-configuration-dialog.tsx

@@ -1,5 +1,6 @@
 import { CheckIcon, ServerIcon, Undo2 } from "lucide-react";
 import { type ReactNode, useState } from "react";
+import { createPortal } from "react-dom";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
@@ -108,6 +109,7 @@ export function ServerConfigurationDialog({ trigger }: { trigger?: ReactNode })
     };
 
     return (
+        <>
             <Dialog open={open} onOpenChange={handleOpenChange}>
                 <DialogTrigger asChild>
                     {trigger || (
@@ -171,13 +173,15 @@ export function ServerConfigurationDialog({ trigger }: { trigger?: ReactNode })
                         </div>
                     </div>
                 </DialogContent>
-
-            {countdown !== null && (
+            </Dialog>
+            {countdown !== null &&
+                createPortal(
                     <div className="fixed inset-0 z-[100] bg-black/50 flex flex-col items-center justify-center pointer-events-auto">
                         <div className="text-2xl font-bold pointer-events-none noselect">Redirecting</div>
                         <div className="text-8xl font-bold pointer-events-none noselect">{countdown}</div>
-                </div>
+                    </div>,
+                    document.body,
                 )}
-        </Dialog>
+        </>
     );
 }