Creating a mobile menu at the bottom of the app

apps/web/src/views/TeamSettingsView.vue

@@ -24,7 +24,7 @@ const businessField = ref('');
 const orgSaving = ref(false);
 const orgOk = ref('');
 
-const email = ref('');
+const mobile = ref('');
 const fullName = ref('');
 const password = ref('');
 const role = ref<Exclude<UserRole, 'owner'>>('sales');
@@ -100,21 +100,21 @@ async function saveOrg() {
 }
 
 async function invite() {
-  if (!email.value.trim() || !fullName.value.trim() || password.value.length < 8) {
-    error.value = 'نام، ایمیل و رمز حداقل ۸ کاراکتر لازم است.';
+  if (!mobile.value.trim() || !fullName.value.trim() || password.value.length < 8) {
+    error.value = 'نام، شماره موبایل و رمز حداقل ۸ کاراکتر لازم است.';
     return;
   }
   saving.value = true;
   error.value = '';
   try {
     const payload: InviteUserRequest = {
-      email: email.value.trim(),
+      mobile: mobile.value.trim(),
       fullName: fullName.value.trim(),
       password: password.value,
       role: role.value,
     };
     await api.post('/users', payload);
-    email.value = '';
+    mobile.value = '';
     fullName.value = '';
     password.value = '';
     role.value = 'sales';
@@ -214,8 +214,16 @@ onMounted(load);
           <input v-model="fullName" required maxlength="120" />
         </label>
         <label>
-          ایمیل
-          <input v-model="email" type="email" required />
+          شماره موبایل
+          <input
+            v-model="mobile"
+            type="tel"
+            inputmode="numeric"
+            autocomplete="tel"
+            dir="ltr"
+            placeholder="0912xxxxxxx"
+            required
+          />
         </label>
         <label>
           رمز عبور موقت
@@ -239,7 +247,7 @@ onMounted(load);
       <article v-for="user in users" :key="user.id" class="row">
         <div>
           <strong>{{ user.fullName }}</strong>
-          <p class="muted">{{ user.email }}</p>
+          <p class="muted">{{ user.mobile || user.email }}</p>
         </div>
         <div class="role-cell">
           <label class="comm-field">
@@ -405,22 +413,38 @@ select {
 
 .role-cell {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  gap: 0.55rem;
+  gap: 0.65rem;
+  flex-wrap: nowrap;
 }
 
 .comm-field {
-  display: grid;
-  gap: 0.15rem;
-  font-size: 0.75rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0;
+  font-size: 0.85rem;
   color: #64748b;
 }
 
+.comm-field input,
+.role-cell select {
+  height: var(--control-h);
+  min-height: var(--control-h);
+}
+
 .comm-field input {
   width: 4.8rem;
   padding: 0 0.45rem;
 }
 
+.role-cell select {
+  width: auto;
+  min-width: 6.6rem;
+}
+
 .role-pill {
   background: #f0fdfa;
   color: #0f766e;