fix: pop badge on empty backspace

packages/nc-gui/components/workspace/InviteSection.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { OrderedWorkspaceRoles, WorkspaceUserRoles } from 'nocodb-sdk'
+import { onKeyStroke } from '@vueuse/core'
+import { OrderedWorkspaceRoles, RoleColors, RoleLabels, WorkspaceUserRoles } from 'nocodb-sdk'
 import { extractSdkResponseErrorMsg, useWorkspace } from '#imports'
 
 const inviteData = reactive({
@@ -38,12 +39,6 @@ watch(inviteData, (newVal) => {
   }
 })
 
-const scrollToEnd = () => {
-  if (divRef.value) {
-    divRef.value.scrollLeft = divRef.value.scrollWidth
-  }
-}
-
 const handleEnter = () => {
   if (inviteData.email.length < 1) {
     emailValidation.isError = true
@@ -58,7 +53,6 @@ const handleEnter = () => {
   inviteData.email += ','
   emailValidation.isError = false
   emailValidation.message = ''
-  scrollToEnd()
 }
 
 const inviteCollaborator = async () => {
@@ -96,6 +90,13 @@ onMounted(async () => {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 })
+
+// remove one email per backspace
+onKeyStroke('Backspace', () => {
+  if (isDivFocused.value && inviteData.email.length < 1) {
+    emailBadges.value.pop()
+  }
+})
 </script>
 
 <template>
@@ -105,10 +106,11 @@ onMounted(async () => {
       <div class="flex flex-col">
         <div
           ref="divRef"
-          class="flex w-130 gap-1 overflow-x-scroll border-1 border-blue items-center rounded-lg nc-scrollbar-x-md"
+          class="flex w-130 border-1 gap-1 items-center rounded-lg nc-scrollbar-x-md flex-wrap"
           tabindex="0"
           :class="{
-            'border-[#3366FF]': isDivFocused,
+            'border-primary/100': isDivFocused,
+            'p-1': emailBadges.length > 1,
           }"
           @click="
             () => {
@@ -121,21 +123,22 @@ onMounted(async () => {
           <span
             v-for="(email, index) in emailBadges"
             :key="email"
-            class="text-[14px] p-0.2 border-1 color-[#4A5268] bg-[#E7E7E9] rounded-md flex items-center justify-between ml-1 mt-1"
+            class="text-[14px] border-1 text-primary/500 bg-primary/100 rounded-md ml-1 mt-1 p-0.5"
           >
             {{ email }}
-            <component :is="iconMap.close" class="ml-1.5 hover:cursor-pointer" @click="emailBadges.splice(index, 1)" />
+            <component :is="iconMap.close" class="ml-0.5 hover:cursor-pointer w-4 h-4" @click="emailBadges.splice(index, 1)" />
           </span>
           <input
             id="email"
             ref="focusRef"
             v-model="inviteData.email"
             :placeholder="emailBadges.length < 1 ? 'Enter emails to send invitation' : ''"
-            class="min-w-30 !focus:border-none !outline-0 !focus:outline-0 !bg-[white] ml-2 mr-3 w-full mt-1"
+            class="min-w-50 !outline-0 !focus:outline-0 ml-2 mr-3 mt-1"
             @keyup.enter="handleEnter"
+            @blur="isDivFocused = false"
           />
         </div>
-        <span v-if="emailValidation.isError" class="ml-2 text-[red] text-[12px] mt-1">{{ emailValidation.message }}</span>
+        <span v-if="emailValidation.isError" class="ml-2 text-red/100 text-[12px] mt-1">{{ emailValidation.message }}</span>
       </div>
       <NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
         <template #suffixIcon>