Tighten team users table with a compact row-number column and fixed layout.

EOF

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/views/TeamSettingsView.vue

@@ -1241,6 +1241,7 @@ onUnmounted(() => {
           <table v-table-cols="'team.users'">
             <thead>
               <tr>
+                <th class="col-row">#</th>
                 <th class="col-who">نام و نام خانوادگی</th>
                 <th class="col-mobile">موبایل</th>
                 <th class="col-role">نقش</th>
@@ -1252,7 +1253,10 @@ onUnmounted(() => {
               </tr>
             </thead>
             <tbody>
-              <tr v-for="user in pagedUsers" :key="user.id" @click="onUserActivate(user)">
+              <tr v-for="(user, idx) in pagedUsers" :key="user.id" @click="onUserActivate(user)">
+                <td class="col-row">
+                  {{ toFaDigits((page - 1) * pageSize + idx + 1) }}
+                </td>
                 <td class="col-who">
                   <div class="who">
                     <img :src="avatarOf(user.id)" :alt="user.fullName" />
@@ -1363,7 +1367,7 @@ onUnmounted(() => {
                 </td>
               </tr>
               <tr v-if="!loading && !pagedUsers.length">
-                <td colspan="7" class="empty">کاربری یافت نشد.</td>
+                <td colspan="9" class="empty">کاربری یافت نشد.</td>
               </tr>
             </tbody>
           </table>
@@ -1961,15 +1965,14 @@ h1 {
 }
 
 table {
-  width: max-content;
-  min-width: 100%;
+  width: 100%;
   border-collapse: collapse;
-  table-layout: auto;
+  table-layout: fixed;
 }
 
 th,
 td {
-  padding: 0.55rem 0.55rem;
+  padding: 0.55rem 0.4rem;
   text-align: right;
   font-size: 0.88rem;
   vertical-align: middle;
@@ -1992,43 +1995,54 @@ tbody tr + tr td {
 
 .ops {
   width: 2.5rem;
-  padding-inline: 0.25rem;
+  padding-inline: 0.2rem;
+}
+
+.col-row {
+  width: 2.1rem;
+  max-width: 2.1rem;
+  padding-inline: 0.15rem;
+  color: #94a3b8;
+  font-size: 0.78rem;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  white-space: nowrap;
 }
 
 .col-who {
-  width: 1%;
+  width: auto;
   white-space: nowrap;
-  padding-inline-start: 0.65rem;
+  padding-inline-start: 0.35rem;
 }
 
 .col-mobile {
-  width: 1%;
+  width: 7rem;
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
   letter-spacing: 0.01em;
 }
 
 .col-role {
-  width: 1%;
+  width: 6.25rem;
 }
 
 .col-comm {
-  width: 1%;
+  width: 5.25rem;
   white-space: nowrap;
 }
 
 .col-status {
-  width: 1%;
+  width: 5.5rem;
   white-space: nowrap;
 }
 
 .col-login {
-  width: 1%;
+  width: 6.75rem;
   white-space: nowrap;
 }
 
 .col-logout {
-  width: 1%;
+  width: 5.25rem;
   white-space: nowrap;
 }
 
@@ -2036,7 +2050,7 @@ tbody tr + tr td {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  max-width: 14rem;
+  max-width: 100%;
   min-width: 0;
 }