change responsive]

src/pages/menuPages/users/components/ManagerMobileListItem.vue

@@ -0,0 +1,41 @@
+<template>
+  <MobileCard clickable @click="$emit('open', item)">
+    <div class="flex items-center gap-2">
+      <div class="min-w-0 flex-1 space-y-1">
+        <div class="flex items-center justify-between gap-2">
+          <span class="truncate text-sm font-700 text-gray-900">{{ item.name || '-' }}</span>
+          <span class="shrink-0 text-xs text-gray-400">#{{ item.id ?? '-' }}</span>
+        </div>
+
+        <div class="truncate text-xs text-gray-600">{{ mobileLabel }}</div>
+      </div>
+
+      <MobileIconButton
+        icon="vuesax-linear:edit"
+        color="#4572E9"
+        :size="20"
+        @click="$emit('edit', item)"
+      />
+    </div>
+  </MobileCard>
+</template>
+
+<script setup lang="ts">
+import type { User } from '@/model/user'
+import MobileCard from '@/components/mobile/MobileCard.vue'
+import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
+
+const props = defineProps<{
+  item: User
+}>()
+
+defineEmits<{
+  (e: 'open', item: User): void
+  (e: 'edit', item: User): void
+}>()
+
+const mobileLabel = computed(() => {
+  if (props.item.mobile == null || props.item.mobile === '') return '-'
+  return String(props.item.mobile)
+})
+</script>