feat: implement Portal component and refactor modals to use it for improved positioning

assets/admin/pages/UsersPage.tsx

@@ -8,6 +8,7 @@ import {
 } from '@heroicons/react/24/outline';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
+import Portal from '../components/ui/Portal';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import { formatDate, formatNumber, maskMobile } from '../lib/utils';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
@@ -101,6 +102,7 @@ function ChangeRoleModal({ user, onClose, onSave, loading }: {
 }) {
   const [selected, setSelected] = useState(getPrimaryRole(user.roles));
   return (
+    <Portal>
     <div className="overlay" onClick={onClose}>
       <div className="modal" style={{ maxWidth: 400 }} onClick={(e) => e.stopPropagation()}>
         <div className="modal-head">
@@ -140,6 +142,7 @@ function ChangeRoleModal({ user, onClose, onSave, loading }: {
         </div>
       </div>
     </div>
+    </Portal>
   );
 }