fix: review changes of select dropdown fields

packages/nc-gui/components/cell/MultiSelect.vue

@@ -354,13 +354,14 @@ const onFocus = () => {
 </script>
 
 <template>
-  <div class="nc-multi-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu">
+  <div
+    class="nc-multi-select h-full w-full flex items-center"
+    :class="{ 'read-only': readOnly, 'px-2': isExpandedFormOpen }"
+    @click="toggleMenu"
+  >
     <div
       v-if="!active"
       class="flex flex-wrap"
-      :class="{
-        'px-2': isExpandedFormOpen,
-      }"
       :style="{
         'display': '-webkit-box',
         'max-width': '100%',
@@ -413,7 +414,7 @@ const onFocus = () => {
       :show-arrow="editAllowed && !readOnly"
       :open="isOpen && editAllowed"
       :disabled="readOnly || !editAllowed"
-      :class="{ 'caret-transparent': !hasEditRoles, '!px-2': isExpandedFormOpen }"
+      :class="{ 'caret-transparent': !hasEditRoles }"
       :dropdown-class-name="`nc-dropdown-multi-select-cell !min-w-200px ${isOpen ? 'active' : ''}`"
       @search="search"
       @keydown="onKeyDown"

packages/nc-gui/components/cell/SingleSelect.vue

@@ -275,17 +275,11 @@ const onFocus = () => {
 <template>
   <div
     class="h-full w-full flex items-center nc-single-select focus:outline-transparent"
-    :class="{ 'read-only': readOnly }"
+    :class="{ 'read-only': readOnly, 'px-2': isExpandedFormOpen }"
     @click="toggleMenu"
     @keydown.enter.stop.prevent="toggleMenu"
   >
-    <div
+    <div v-if="!(active || isEditable)" class="w-full">
-      v-if="!(active || isEditable)"
-      class="w-full"
-      :class="{
-        'px-2': isExpandedFormOpen,
-      }"
-    >
       <a-tag v-if="selectedOpt" class="rounded-tag max-w-full" :color="selectedOpt.color">
         <span
           :style="{
@@ -320,7 +314,7 @@ const onFocus = () => {
       ref="aselect"
       v-model:value="vModel"
       class="w-full overflow-hidden xs:min-h-12"
-      :class="{ 'caret-transparent': !hasEditRoles, '!px-2': isExpandedFormOpen }"
+      :class="{ 'caret-transparent': !hasEditRoles }"
       :placeholder="isEditColumn ? $t('labels.optional') : ''"
       :allow-clear="!column.rqd && editAllowed"
       :bordered="false"

packages/nc-gui/components/cell/User.vue

@@ -263,13 +263,14 @@ const filterOption = (input: string, option: any) => {
 </script>
 
 <template>
-  <div class="nc-user-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu">
+  <div
+    class="nc-user-select h-full w-full flex items-center"
+    :class="{ 'read-only': readOnly, 'px-2': isExpandedFormOpen }"
+    @click="toggleMenu"
+  >
     <div
       v-if="!active"
       class="flex flex-wrap"
-      :class="{
-        'px-2': isExpandedFormOpen,
-      }"
       :style="{
         'display': '-webkit-box',
         'max-width': '100%',
@@ -308,7 +309,7 @@ const filterOption = (input: string, option: any) => {
       :show-arrow="editAllowed && !readOnly"
       :open="isOpen && editAllowed"
       :disabled="readOnly || !editAllowed"
-      :class="{ 'caret-transparent': !hasEditRoles, '!px-2': isExpandedFormOpen }"
+      :class="{ 'caret-transparent': !hasEditRoles }"
       :dropdown-class-name="`nc-dropdown-user-select-cell ${isOpen ? 'active' : ''}`"
       :filter-option="filterOption"
       @search="search"