fix: limit multi-select width and add space between option and tick icon (#9659)

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

@@ -381,6 +381,7 @@ const onFocus = () => {
           v-for="op of options"
           :key="op.title"
           :value="op.title"
+          class="gap-2"
           :data-testid="`select-option-${column.title}-${location === 'filter' ? 'filter' : rowIndex}`"
           :class="`nc-select-option-${column.title}-${op.title}`"
         >
@@ -487,6 +488,7 @@ const onFocus = () => {
           v-for="op of options"
           :key="op.id || op.title"
           :value="op.title"
+          class="gap-2"
           :data-testid="`select-option-${column.title}-${location === 'filter' ? 'filter' : rowIndex}`"
           :class="`nc-select-option-${column.title}-${op.title}`"
           @click.stop

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

@@ -407,6 +407,7 @@ const onFocus = () => {
           v-for="op of options"
           :key="op.title"
           :value="op.title"
+          class="gap-2"
           :data-testid="`select-option-${column.title}-${rowIndex}`"
           :class="`nc-select-option-${column.title}-${op.title}`"
           @click.stop

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

@@ -197,6 +197,10 @@ const isInputBoxOnFocus = ref(false)
 // provide the following to override the default behavior and enable input fields like in form
 provide(ActiveCellInj, ref(true))
 provide(IsFormInj, ref(true))
+
+const isSingleOrMultiSelect = computed(() => {
+  return filterType.value === 'isSingleSelect' || filterType.value === 'isMultiSelect'
+})
 </script>
 
 <template>
@@ -209,7 +213,7 @@ provide(IsFormInj, ref(true))
   <div
     v-else
     class="bg-white border-1 flex flex-grow min-h-4 h-full px-1 items-center nc-filter-input-wrapper !rounded-lg"
-    :class="{ 'px-2': hasExtraPadding, 'border-brand-500': isInputBoxOnFocus }"
+    :class="{ 'px-2': hasExtraPadding, 'border-brand-500': isInputBoxOnFocus, '!max-w-100': isSingleOrMultiSelect }"
     @mouseup.stop
   >
     <component