fix: SingleSelect and MutliSelect improved for mobile view

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

@@ -43,6 +43,8 @@ const { modelValue, disableOptionCreation } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
+const { isMobileMode } = useGlobal()
+
 const column = inject(ColumnInj)!
 
 const readOnly = inject(ReadonlyInj)!
@@ -383,7 +385,7 @@ const selectedOpts = computed(() => {
       :placeholder="isEditColumn ? $t('labels.optional') : ''"
       :bordered="false"
       clear-icon
-      show-search
+      :show-search="!isMobileMode"
       :show-arrow="editAllowed && !(readOnly || isLockedMode)"
       :open="isOpen && editAllowed"
       :disabled="readOnly || !editAllowed || isLockedMode"
@@ -392,6 +394,9 @@ const selectedOpts = computed(() => {
       @search="search"
       @keydown.stop
     >
+      <template #suffixIcon>
+        <GeneralIcon icon="arrowDown" class="text-gray-700 nc-select-expand-btn" />
+      </template>
       <a-select-option
         v-for="op of options"
         :key="op.id || op.title"

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

@@ -37,6 +37,8 @@ const { modelValue, disableOptionCreation } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
+const { isMobileMode } = useGlobal()
+
 const column = inject(ColumnInj)!
 
 const readOnly = inject(ReadonlyInj)!
@@ -202,6 +204,8 @@ async function addIfMissingAndSave() {
 }
 
 const search = () => {
+  if (isMobileMode.value) return
+
   searchVal.value = aselect.value?.$el?.querySelector('.ant-select-selection-search-input')?.value
 }
 
@@ -285,7 +289,7 @@ const selectedOpt = computed(() => {
       v-else
       ref="aselect"
       v-model:value="vModel"
-      class="w-full overflow-hidden"
+      class="w-full overflow-hidden xs:min-h-12"
       :class="{ 'caret-transparent': !hasEditRoles }"
       :placeholder="isEditColumn ? $t('labels.optional') : ''"
       :allow-clear="!column.rqd && editAllowed"
@@ -294,7 +298,7 @@ const selectedOpt = computed(() => {
       :disabled="readOnly || !editAllowed || isLockedMode"
       :show-arrow="hasEditRoles && !(readOnly || isLockedMode) && active && vModel === null"
       :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen && active ? 'active' : ''}`"
-      :show-search="isOpen && active"
+      :show-search="!isMobileMode && isOpen && active"
       @select="onSelect"
       @keydown="onKeydown($event)"
       @search="search"

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

@@ -55,6 +55,16 @@ const onChange = (value: string) => {
 </template>
 
 <style lang="scss">
+.ant-select-item {
+  @apply !xs:h-13;
+}
+.ant-select-item-option-content {
+  @apply !xs:mt-2.5;
+}
+.ant-select-item-option-state {
+  @apply !xs:mt-1.75;
+}
+
 .nc-select.ant-select {
   height: fit-content;
   .ant-select-selector {

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -616,7 +616,7 @@ export default {
                   <SmartsheetDivDataCell
                     v-if="col.title"
                     :ref="i ? null : (el: any) => (cellWrapperEl = el)"
-                    class="!bg-white rounded-lg !w-[20rem] !xs:w-full border-1 border-gray-200 overflow-hidden px-1 min-h-[35px] flex items-center relative"
+                    class="!bg-white rounded-lg !w-[20rem] !xs:w-full border-1 border-gray-200 overflow-hidden px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
                   >
                     <LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="_row.row[col.title]" :row="_row" :column="col" />
 
@@ -674,7 +674,7 @@ export default {
                     <LazySmartsheetDivDataCell
                       v-if="col.title"
                       :ref="i ? null : (el: any) => (cellWrapperEl = el)"
-                      class="!bg-white rounded-lg !w-[20rem] border-1 overflow-hidden border-gray-200 px-1 min-h-[35px] flex items-center relative"
+                      class="!bg-white rounded-lg !w-[20rem] border-1 overflow-hidden border-gray-200 px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
                     >
                       <LazySmartsheetVirtualCell
                         v-if="isVirtualCol(col)"
@@ -825,3 +825,13 @@ export default {
   @apply !p-0;
 }
 </style>
+
+<style lang="scss" scoped>
+:deep(.ant-select-selector) {
+  @apply !xs:(h-full);
+}
+
+:deep(.ant-select-selection-item) {
+  @apply !xs:(mt-1.75 ml-1);
+}
+</style>