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

src/components/user/change-role-dialog.tsx

@@ -43,23 +43,23 @@ const ChangeRoleAction = ({ data }: SetRoleProps) => {
         <TooltipContent className="bg-yellow-500 [&_svg]:bg-yellow-500 [&_svg]:fill-yellow-500 text-white">
           <Label>{m.ui_change_role_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-yellow-600">
-              <UserGearIcon size={16} />
-              {m.ui_change_role_btn()}
-            </DialogTitle>
-            <DialogDescription className="sr-only">
-              {m.ui_change_role_btn()}
-            </DialogDescription>
-          </DialogHeader>
-          <AdminSetUserRoleForm 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-yellow-600">
+            <UserGearIcon size={16} />
+            {m.ui_change_role_btn()}
+          </DialogTitle>
+          <DialogDescription className="sr-only">
+            {m.ui_change_role_btn()}
+          </DialogDescription>
+        </DialogHeader>
+        <AdminSetUserRoleForm data={data} onSubmit={_setOpen} />
+      </DialogContent>
     </Dialog>
   );
 };