Done on function Ban and Unban User with reason and expiration date

src/components/user/edit-user-dialog.tsx

@@ -43,22 +43,22 @@ const EditUserAction = ({ data }: EditUserProps) => {
         <TooltipContent className="bg-blue-500 [&_svg]:bg-blue-500 [&_svg]:fill-blue-500 text-white">
           <Label>{m.ui_edit_user_btn()}</Label>
         </TooltipContent>
-        <DialogContent
-          className="max-w-100 xl:max-w-2xl"
-          {...prevent}
-          onPointerDownOutside={(e) => e.preventDefault()}
-        >
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-3 text-lg font-bold text-blue-600">
-              <PenIcon size={16} /> {m.ui_edit_user_btn()}
-            </DialogTitle>
-            <DialogDescription className="sr-only">
-              {m.ui_edit_user_btn()}
-            </DialogDescription>
-          </DialogHeader>
-          <AdminUpdateUserInfoForm data={data} onSubmit={_setOpen} />
-        </DialogContent>
       </Tooltip>
+      <DialogContent
+        className="max-w-80 xl:max-w-sm"
+        {...prevent}
+        onPointerDownOutside={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-3 text-lg font-bold text-blue-600">
+            <PenIcon size={16} /> {m.ui_edit_user_btn()}
+          </DialogTitle>
+          <DialogDescription className="sr-only">
+            {m.ui_edit_user_btn()}
+          </DialogDescription>
+        </DialogHeader>
+        <AdminUpdateUserInfoForm data={data} onSubmit={_setOpen} />
+      </DialogContent>
     </Dialog>
   );
 };