fix(web): refine mobile user cards

web/default/src/features/users/components/users-columns.tsx

@@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { type ColumnDef } from '@tanstack/react-table'
+import type { ColumnDef } from '@tanstack/react-table'
 import { useTranslation } from 'react-i18next'
 
 import { BadgeCell } from '@/components/data-table'
@@ -40,7 +40,7 @@ import {
   USER_ROLES,
   isUserDeleted,
 } from '../constants'
-import { type User } from '../types'
+import type { User } from '../types'
 import { DataTableRowActions } from './data-table-row-actions'
 
 function getQuotaProgressColor(percentage: number): string {
@@ -80,11 +80,14 @@ export function useUsersColumns(): ColumnDef<User>[] {
       header: t('ID'),
       cell: ({ row }) => {
         return (
-          <TableId value={row.getValue('id') as number} className='w-[60px]' />
+          <TableId
+            value={row.getValue('id') as number}
+            className='w-[60px] text-sm'
+          />
         )
       },
       size: 80,
-      meta: { mobileHidden: true },
+      meta: { mobileOrder: 10 },
     },
     {
       accessorKey: 'username',
@@ -224,6 +227,7 @@ export function useUsersColumns(): ColumnDef<User>[] {
         )
       },
       size: 170,
+      meta: { mobileOrder: 40 },
     },
     {
       accessorKey: 'group',
@@ -242,6 +246,7 @@ export function useUsersColumns(): ColumnDef<User>[] {
         return group.includes(searchValue)
       },
       size: 140,
+      meta: { mobileOrder: 30 },
     },
     {
       accessorKey: 'role',
@@ -268,6 +273,7 @@ export function useUsersColumns(): ColumnDef<User>[] {
       },
       enableSorting: false,
       size: 120,
+      meta: { mobileOrder: 20 },
     },
     {
       id: 'invite_info',