fix(web): refine mobile user cards

web/default/src/components/data-table/layout/card-row-content.tsx

@@ -16,13 +16,27 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import type { Row } from '@tanstack/react-table'
+import type { Cell, Row } from '@tanstack/react-table'
 import * as React from 'react'
 
 import { StatusBadgeTypeContext } from '@/components/status-badge'
 
 import { getCellLabel, renderCellContent } from './card-cell-utils'
 
+function orderCardCells<TData>(
+  cells: Cell<TData, unknown>[]
+): Cell<TData, unknown>[] {
+  return [...cells].sort((a, b) => {
+    const aOrder = a.column.columnDef.meta?.mobileOrder
+    const bOrder = b.column.columnDef.meta?.mobileOrder
+
+    if (aOrder == null && bOrder == null) return 0
+    if (aOrder == null) return 1
+    if (bOrder == null) return -1
+    return aOrder - bOrder
+  })
+}
+
 /**
  * Shared, column-meta-driven card content rendering for TanStack rows.
  *
@@ -62,13 +76,15 @@ function CompactContent<TData>({ row }: { row: Row<TData> }) {
   const titleCell = allCells.find((_, i) => cellMetas[i]?.mobileTitle)
   const badgeCell = allCells.find((_, i) => cellMetas[i]?.mobileBadge)
   const actionsCell = allCells.find((c) => c.column.id === 'actions')
-  const fieldCells = allCells.filter(
+  const fieldCells = orderCardCells(
+    allCells.filter(
       (c, i) =>
         c !== titleCell &&
         c !== badgeCell &&
         c !== actionsCell &&
         !cellMetas[i]?.mobileHidden
     )
+  )
 
   return (
     <>
@@ -135,9 +151,11 @@ function FallbackContent<TData>({ row }: { row: Row<TData> }) {
   )
 
   const actionsCell = allCells.find((c) => c.column.id === 'actions')
-  const contentCells = allCells.filter(
+  const contentCells = orderCardCells(
+    allCells.filter(
       (c, i) => c.column.id !== 'actions' && !cellMetas[i]?.mobileHidden
     )
+  )
 
   return (
     <>

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',

web/default/src/i18n/locales/fr.json

@@ -3718,7 +3718,7 @@
     "Right to Left": "De droite à gauche",
     "Role": "Rôle",
     "Roleplay": "Roleplay",
-    "Root": "Racine",
+    "Root": "Root",
     "Rose Garden": "Jardin de roses",
     "Route": "Route",
     "Route active": "Route active",

web/default/src/i18n/locales/ja.json

@@ -3718,7 +3718,7 @@
     "Right to Left": "右から左",
     "Role": "ロール",
     "Roleplay": "ロールプレイ",
-    "Root": "ルート",
+    "Root": "Root",
     "Rose Garden": "ローズガーデン",
     "Route": "ルート",
     "Route active": "ルート有効",

web/default/src/i18n/locales/ru.json

@@ -3718,7 +3718,7 @@
     "Right to Left": "Справа налево",
     "Role": "Роль",
     "Roleplay": "Ролевые игры",
-    "Root": "Корень",
+    "Root": "Root",
     "Rose Garden": "Розовый сад",
     "Route": "Маршрут",
     "Route active": "Маршрут активен",

web/default/src/i18n/locales/vi.json

@@ -3718,7 +3718,7 @@
     "Right to Left": "Phải sang trái",
     "Role": "Vai trò",
     "Roleplay": "Nhập vai",
-    "Root": "Gốc",
+    "Root": "Root",
     "Rose Garden": "Vườn hoa hồng",
     "Route": "Tuyến đường",
     "Route active": "Tuyến đang hoạt động",

web/default/src/i18n/locales/zh.json

@@ -3718,7 +3718,7 @@
     "Right to Left": "从右到左",
     "Role": "角色",
     "Roleplay": "角色扮演",
-    "Root": "根",
+    "Root": "Root",
     "Rose Garden": "玫瑰花园",
     "Route": "路由",
     "Route active": "路由已启用",

web/default/src/tanstack-table.d.ts

@@ -28,5 +28,6 @@ declare module '@tanstack/react-table' {
     mobileTitle?: boolean // card title area (left, larger text)
     mobileBadge?: boolean // status badge alongside title (right)
     mobileHidden?: boolean // hide this column on mobile entirely
+    mobileOrder?: number // lower values appear first in card field area
   }
 }