fix(modals): fix animation of the modals + remove comments

Author: p2arthur

src/features/common/components/dialog.tsx

@@ -43,21 +43,27 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
 
     return (
       <DialogPortal>
-        <DialogOverlay className={cn(mounted.current && 'data-[state=open]:animate-in data-[state=open]:fade-in-0')} />
+        <DialogOverlay
+          className={cn(
+            'fixed inset-0 z-50 bg-black/80',
+            mounted.current &&
+              'data-[state=open]:animate-in data-[state=open]:fade-in data-[state=closed]:animate-out data-[state=closed]:fade-out'
+          )}
+        />
         <DialogPrimitive.Content
           ref={ref}
           className={cn(
-            'fixed top-0 w-full h-full md:w-auto md:h-auto md:left-[50%] md:top-[50%] z-50 grid md:translate-x-[-50%] md:translate-y-[-50%] gap-3 border bg-background shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] md:rounded-lg pt-4 [&:has(h2)]:pt-2.5',
+            'fixed top-0 left-0 w-full h-full md:w-auto md:h-auto md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 z-50 grid gap-3 border bg-background shadow-lg duration-200 md:rounded-lg pt-4 [&:has(h2)]:pt-2.5',
             mounted.current &&
-              'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+              'data-[state=open]:animate-in data-[state=open]:fade-in data-[state=closed]:animate-out data-[state=closed]:fade-out',
             className
           )}
           {...props}
           tabIndex={undefined}
         >
           {children}
           {!hideClose && (
-            <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+            <DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 hover:opacity-100 focus:outline-hidden">
               <Cross2Icon className="size-4" />
               <span className="sr-only">Close</span>
             </DialogPrimitive.Close>

src/features/layout/constants/menu-items.tsx

@@ -1,10 +1,7 @@
-// src/features/layout/config/menu-items.ts
-
 import { Telescope, FlaskConical, Coins } from 'lucide-react'
 import SvgWizard from '@/features/common/components/icons/wizard'
 import { Urls } from '@/routes/urls'
 
-// ✅ Use an array of objects so it can be iterated
 export const menuItems = [
   {
     urlTemplate: Urls.Network.Explore,

src/features/network/components/network-configs-table.tsx

@@ -48,20 +48,24 @@ export function NetworkConfigsTable() {
         </Button>
       </div>
       <DataTable ariaLabel={networkConfigsTableLabel} columns={tableColumns} data={data} dataContext="networkConfig" />
-      <Dialog open={createNetworkConfigDialogOpen} onOpenChange={setCreateNetworkConfigDialogOpen} modal={true}>
-        {createNetworkConfigDialogOpen && (
-          <DialogContent className="bg-card" aria-label={createNetworkConfigDialogLabel}>
-            <Description hidden={true}>Create a network</Description>
-            <DialogHeader className="flex-row items-center space-y-0">
-              <DialogTitle asChild>
-                <h2>{createNetworkConfigDialogLabel}</h2>
-              </DialogTitle>
-            </DialogHeader>
-            <MediumSizeDialogBody>
-              <CreateNetworkConfigForm onSuccess={() => setCreateNetworkConfigDialogOpen(false)} />
-            </MediumSizeDialogBody>
-          </DialogContent>
-        )}
+      <Dialog open={createNetworkConfigDialogOpen} onOpenChange={setCreateNetworkConfigDialogOpen} modal>
+        <DialogContent
+          className="bg-card"
+          onOpenAutoFocus={(e) => e.preventDefault()} // same as the first modal
+          aria-label={createNetworkConfigDialogLabel}
+        >
+          <Description hidden>Create a network</Description>
+
+          <DialogHeader className="flex-row items-center space-y-0">
+            <DialogTitle asChild>
+              <h2>{createNetworkConfigDialogLabel}</h2>
+            </DialogTitle>
+          </DialogHeader>
+
+          <MediumSizeDialogBody>
+            <CreateNetworkConfigForm onSuccess={() => setCreateNetworkConfigDialogOpen(false)} />
+          </MediumSizeDialogBody>
+        </DialogContent>
       </Dialog>
     </div>
   )