fix(nc-gui): form search limit option issue

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

@@ -351,7 +351,7 @@ const onFocus = () => {
           </a-tag></a-radio
         >
       </a-radio-group>
-      <div v-if="vModel" class="inline-block px-2 pt-2 cursor-pointer text-xs" @click="vModel = ''">
+      <div v-if="vModel" class="inline-block px-2 pt-2 cursor-pointer text-xs text-gray-500 hover:text-gray-800" @click="vModel = ''">
         {{ $t('labels.clearSelection') }}
       </div>
     </div>

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

@@ -377,7 +377,11 @@ const filterOption = (input: string, option: any) => {
           </component>
         </template>
       </component>
-      <div v-if="!isMultiple && vModel.length" class="inline-block px-2 pt-2 cursor-pointer text-xs" @click="vModel = []">
+      <div
+        v-if="!isMultiple && vModel.length"
+        class="inline-block px-2 pt-2 cursor-pointer text-xs text-gray-500 hover:text-gray-800"
+        @click="vModel = []"
+      >
         {{ $t('labels.clearSelection') }}
       </div>
     </div>

packages/nc-gui/components/smartsheet/Form.vue

@@ -1139,7 +1139,7 @@ useEventListener(
 
                         <!-- Limit options -->
                         <div v-if="isSelectTypeCol(element.uidt)" class="px-3 py-2 border-1 border-gray-200 rounded-lg">
-                          <div class="flex items-start gap-3">
+                          <div class="flex items-center gap-3">
                             <a-switch
                               v-model:checked="element.meta.isLimitOption"
                               v-e="['a:form-view:field:limit-options']"
@@ -1148,7 +1148,7 @@ useEventListener(
                             />
                             <div class="font-medium text-gray-800">{{ $t('labels.limitOptions') }}</div>
                           </div>
-                          <div class="pl-8 flex-1 max-w-[calc(100%_-_40px)]">
+                          <div class="pl-10 mt-2 flex-1 max-w-[calc(100%_-_40px)]">
                             <div class="text-gray-500">{{ $t('labels.limitOptionsSubtext') }}.</div>
                             <div v-if="element.meta.isLimitOption" class="mt-5 max-w-[80%]">
                               <LazySmartsheetFormLimitOptions

packages/nc-gui/components/smartsheet/form/LimitOptions.vue

@@ -124,7 +124,7 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
 </script>
 
 <template>
-  <div class="w-full h-full nc-col-option-select-option nc-form-scrollbar">
+  <div class="w-full h-full nc-col-select-option nc-form-scrollbar">
     <div v-if="vModel.length > 12">
       <a-input
         v-model:value="searchQuery"
@@ -152,6 +152,7 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
       :model-value="vModel"
       item-key="id"
       handle=".nc-child-draggable-icon"
+      ghost-class="nc-form-field-limit-option-ghost"
       class="rounded-lg border-1 border-gray-200 !max-h-[224px] overflow-y-auto nc-form-scrollbar"
       @change="onMove($event)"
       @start="drag = true"
@@ -258,7 +259,7 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
         v-else-if="
           vModel.length &&
           searchQuery &&
-          !vModel?.filter((el) => {
+          !vModel?.filter((element) => {
             return column.uidt === UITypes.User
               ? (element?.display_name?.trim() || element?.email)?.toLowerCase().includes(searchQuery.toLowerCase())
               : element.title?.toLowerCase().includes(searchQuery.toLowerCase())
@@ -272,7 +273,7 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .nc-form-scrollbar {
   @apply scrollbar scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent;
   &::-webkit-scrollbar-thumb:hover {
@@ -286,4 +287,7 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
 :deep(.ant-tag) {
   @apply rounded-tag my-[2px];
 }
+.nc-form-field-limit-option-ghost {
+  @apply bg-gray-50;
+}
 </style>