fix: acces dropdown issues

packages/nc-gui/components/nc/Badge.vue

@@ -12,7 +12,7 @@ const props = withDefaults(
 
 <template>
   <div
-    class="h-6 rounded-md px-1"
+    class="rounded-md px-1"
     :class="{
       'border-purple-500 bg-purple-100': props.color === 'purple',
       'border-blue-500 bg-blue-100': props.color === 'blue',

packages/nc-gui/components/roles/Badge.vue

@@ -18,8 +18,6 @@ const props = withDefaults(
 
 const roleRef = toRef(props, 'role')
 const clickableRef = toRef(props, 'clickable')
-// const inheritRef = toRef(props, 'inherit')
-const borderRef = toRef(props, 'border')
 
 const roleProperties = computed(() => {
   const role = roleRef.value
@@ -38,15 +36,14 @@ const roleProperties = computed(() => {
 
 <template>
   <div
-    class="flex items-center !border-0"
+    class="flex items-center"
     :class="{
       'cursor-pointer': clickableRef,
     }"
-    style="width: fit-content"
   >
-    <NcBadge class="!h-auto !px-[8px]" :color="roleProperties.color" :border="borderRef">
+    <NcBadge class="!px-2" :color="roleProperties.color" :border="borderRef">
       <div
-        class="badge-text flex items-center gap-[4px]"
+        class="badge-text flex items-center gap-2 !h-7"
         :class="{
           'text-purple-500': roleProperties.color === 'purple',
           'text-blue-500': roleProperties.color === 'blue',

packages/nc-gui/components/roles/Selector.vue

@@ -23,13 +23,13 @@ const descriptionRef = toRef(props, 'description')
 
 <template>
   <NcDropdown>
-    <RolesBadge class="border-1" data-testid="roles" :role="roleRef" :inherit="inheritRef === role" clickable />
+    <RolesBadge data-testid="roles" :role="roleRef" :inherit="inheritRef === role" clickable />
     <template #overlay>
-      <div class="nc-role-select-dropdown flex flex-col gap-[4px] p-1">
+      <div class="nc-role-select-dropdown flex flex-col gap-1 p-2">
-        <div class="flex flex-col gap-[4px]">
+        <div class="flex flex-col gap-1">
           <div v-for="rl in props.roles" :key="rl" :value="rl" :selected="rl === roleRef" @click="props.onRoleChange(rl)">
             <div
-              class="flex flex-col py-[3px] px-[8px] gap-[4px] bg-transparent cursor-pointer"
+              class="flex flex-col py-1.5 rounded-lg px-2 gap-1 bg-transparent cursor-pointer hover:bg-gray-100"
               :class="{
                 'w-[350px]': descriptionRef,
                 'w-[200px]': !descriptionRef,

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

@@ -98,21 +98,19 @@ onMounted(async () => {
           </td>
           <td class="w-1/5">
             <div class="-left-2.5 top-5">
-              <a-dropdown v-if="collab.roles !== WorkspaceUserRoles.OWNER" :trigger="['click']">
+              <NcDropdown v-if="collab.roles !== WorkspaceUserRoles.OWNER" :trigger="['click']">
                 <MdiDotsVertical
-                  class="h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)"
+                  class="border-1 !text-gray-600 h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)"
                 />
                 <template #overlay>
-                  <a-menu>
+                  <NcMenu>
-                    <a-menu-item @click="removeCollaborator(collab.id)">
+                    <NcMenuItem class="!text-red-500 !hover:bg-red-50" @click="removeCollaborator(collab.id)">
-                      <div class="flex flex-row items-center py-2 text-s gap-1.5 text-red-500 cursor-pointer">
+                      <MaterialSymbolsDeleteOutlineRounded />
-                        <MaterialSymbolsDeleteOutlineRounded />
+                      Remove user
-                        Remove user
+                    </NcMenuItem>
-                      </div>
+                  </NcMenu>
-                    </a-menu-item>
-                  </a-menu>
                 </template>
-              </a-dropdown>
+              </NcDropdown>
             </div>
           </td>
           <td class="w-1/5 padding"></td>

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

@@ -212,20 +212,19 @@ const onPaste = (e: ClipboardEvent) => {
         </div>
         <span v-if="emailValidation.isError" class="ml-2 text-red-500 text-[10px] mt-1.5">{{ emailValidation.message }}</span>
       </div>
-      <NcSelect v-model:value="inviteData.roles" class="min-w-30 !rounded px-1" data-testid="roles">
+      <RolesSelector
-        <template v-for="role of allowedRoles" :key="`role-option-${role}`">
+        class="px-1"
-          <a-select-option v-if="role" :value="role">
+        :role="inviteData.roles"
-            <NcBadge :color="RoleColors[role]">
+        :roles="allowedRoles"
-              <p class="badge-text">{{ RoleLabels[role] }}</p>
+        :on-role-change="(role: WorkspaceUserRoles) => (inviteData.roles = role)"
-            </NcBadge>
+        :description="true"
-          </a-select-option>
+      />
-        </template>
-      </NcSelect>
 
       <NcButton
         type="primary"
         :disabled="!emailBadges.length || isInvitingCollaborators || emailValidation.isError"
         size="small"
+        class="mt-0.5"
         :loading="isInvitingCollaborators"
         @click="inviteCollaborator"
       >