Nc fix: Org user role selector dropdown issue (#8883)

* fix(nc-gui): org role selector dropdown options issue

* fix(nc-gui): update sort icons from member list

* fix(nc-gui): add missing user role dropdown class

* chore: font size for collab data

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>

---------

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>

packages/nc-gui/components/account/HeaderWithSorter.vue

@@ -12,21 +12,16 @@ const { header, field, toggleSort } = defineProps<{
     <span>
       {{ header }}
     </span>
-    <div class="flex flex-col">
+    <div class="flex">
       <GeneralIcon
-        icon="arrowDropUp"
-        class="text-sm mb-[-10px] text-[16px]"
+        v-if="activeSort.field === field"
+        icon="chevronDown"
+        class="flex-none"
         :class="{
-          'text-primary': activeSort.field === field && activeSort.direction === 'asc',
-        }"
-      />
-      <GeneralIcon
-        icon="arrowDropDown"
-        class="text-sm text-[16px]"
-        :class="{
-          'text-primary': activeSort.field === field && activeSort.direction === 'desc',
+          'transform rotate-180': activeSort.direction === 'asc',
         }"
       />
+      <GeneralIcon v-else icon="chevronUpDown" class="flex-none" />
     </div>
   </div>
 </template>

packages/nc-gui/components/account/UsersModal.vue

@@ -180,6 +180,7 @@ const onPaste = (e: ClipboardEvent) => {
                       :ref="emailInput"
                       v-model:value="usersData.emails"
                       size="middle"
+                      class="nc-input-sm"
                       validate-trigger="onBlur"
                       :placeholder="$t('labels.email')"
                       @paste.prevent="onPaste"
@@ -191,10 +192,11 @@ const onPaste = (e: ClipboardEvent) => {
                   <a-form-item name="role" :rules="[{ required: true, message: $t('msg.roleRequired') }]">
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
 
-                    <a-select
+                    <NcSelect
                       v-model:value="usersData.role"
-                      class="nc-user-roles"
-                      dropdown-class-name="nc-dropdown-user-role !px-2"
+                      class="w-55 nc-user-roles"
+                      :dropdown-match-select-width="false"
+                      dropdown-class-name="nc-dropdown-user-role max-w-64"
                     >
                       <a-select-option
                         class="nc-role-option"
@@ -211,9 +213,9 @@ const onPaste = (e: ClipboardEvent) => {
                           />
                         </div>
 
-                        <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
+                        <div class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                           {{ $t('msg.info.roles.orgCreator') }}
-                        </span>
+                        </div>
                       </a-select-option>
 
                       <a-select-option
@@ -230,11 +232,11 @@ const onPaste = (e: ClipboardEvent) => {
                             class="w-4 h-4 text-primary"
                           />
                         </div>
-                        <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
+                        <div class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                           {{ $t('msg.info.roles.orgViewer') }}
-                        </span>
+                        </div>
                       </a-select-option>
-                    </a-select>
+                    </NcSelect>
                   </a-form-item>
                 </div>
               </div>
@@ -254,3 +256,9 @@ const onPaste = (e: ClipboardEvent) => {
     </div>
   </a-modal>
 </template>
+
+<style lang="scss" scoped>
+.nc-input-sm {
+  @apply !rounded-md;
+}
+</style>

packages/nc-gui/components/smartsheet/toolbar/LockType.vue

@@ -55,7 +55,7 @@ const selectedView = inject(ActiveViewInj)
             <span v-else />
           </template>
         </div>
-        <div v-if="!hideTick" class="nc-subtitle max-w-120 text-sm text-gray-500 whitespace-normal ml-6">
+        <div v-if="!hideTick" class="nc-subtitle max-w-120 text-xs text-gray-500 whitespace-normal ml-6">
           {{ $t(types[type].subtitle) }}
         </div>
       </div>