fix: Improved UI Filter modal

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

@@ -325,6 +325,7 @@ onMounted(async () => {
                 <div v-else :key="`${i}nested`" class="flex nc-filter-logical-op">
                   <NcSelect
                     v-model:value="filter.logical_op"
+                    v-e="['c:filter:logical-op:select']"
                     :dropdown-match-select-width="false"
                     class="min-w-20 capitalize"
                     placeholder="Group op"
@@ -342,6 +343,7 @@ onMounted(async () => {
                 <NcButton
                   v-if="!filter.readOnly"
                   :key="i"
+                  v-e="['c:filter:delete']"
                   type="text"
                   size="small"
                   class="nc-filter-item-remove-btn cursor-pointer"
@@ -370,6 +372,7 @@ onMounted(async () => {
             <NcSelect
               v-else
               v-model:value="filter.logical_op"
+              v-e="['c:filter:logical-op:select']"
               :dropdown-match-select-width="false"
               class="h-full !min-w-20 !max-w-20 capitalize"
               hide-details
@@ -395,6 +398,7 @@ onMounted(async () => {
             />
             <NcSelect
               v-model:value="filter.comparison_op"
+              v-e="['c:filter:comparison-op:select']"
               :dropdown-match-select-width="false"
               class="caption nc-filter-operation-select !min-w-26.75 !max-w-26.75 max-h-8"
               :placeholder="$t('labels.operation')"
@@ -416,6 +420,7 @@ onMounted(async () => {
             <NcSelect
               v-else-if="[UITypes.Date, UITypes.DateTime].includes(getColumn(filter)?.uidt)"
               v-model:value="filter.comparison_sub_op"
+              v-e="['c:filter:sub-comparison-op:select']"
               :dropdown-match-select-width="false"
               class="caption nc-filter-sub_operation-select min-w-28"
               :class="{ 'flex-grow w-full': !showFilterInput(filter), 'max-w-28': showFilterInput(filter) }"
@@ -453,6 +458,7 @@ onMounted(async () => {
 
             <NcButton
               v-if="!filter.readOnly"
+              v-e="['c:filter:delete']"
               type="text"
               size="small"
               class="nc-filter-item-remove-btn self-center"
@@ -508,4 +514,8 @@ onMounted(async () => {
 :deep(.ant-select-item-option) {
   @apply "!min-w-full";
 }
+
+:deep(.ant-select-selector) {
+  @apply !min-h-8.25;
+}
 </style>

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

@@ -205,7 +205,7 @@ provide(IsFormInj, ref(true))
   />
   <div
     v-else
-    class="bg-white border-1 flex flex-grow min-h-32px h-full items-center"
+    class="bg-white border-1 flex flex-grow min-h-4 h-full items-center nc-filter-input-wrapper !rounded-lg"
     :class="{ 'px-2': hasExtraPadding, 'border-brand-500': isInputBoxOnFocus }"
     @mouseup.stop
   >
@@ -223,3 +223,9 @@ provide(IsFormInj, ref(true))
     />
   </div>
 </template>
+
+<style lang="scss" scoped>
+:deep(input) {
+  @apply py-1.5;
+}
+</style>