fix : UI improvements

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

@@ -112,7 +112,7 @@ defineExpose({
 
 <template>
   <div
-    class="p-6 menu-filter-dropdown bg-gray-50"
+    class="p-6 menu-filter-dropdown bg-gray-50 !border"
     :class="{ 'shadow-xl min-w-[430px] max-w-[630px] max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }"
   >
     <div v-if="filters && filters.length" class="nc-filter-grid mb-2" @click.stop>
@@ -272,7 +272,7 @@ defineExpose({
 <style scoped>
 .nc-filter-grid {
   display: grid;
-  grid-template-columns: 18px 70px auto auto auto;
+  grid-template-columns: 18px 75px auto auto auto;
   @apply gap-[12px]
   align-items: center;
 }

packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@@ -79,7 +79,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
       </a-button>
     </div>
     <template #overlay>
-      <div class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto" @click.stop>
+      <div class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border" @click.stop>
         <div class="p-1" @click.stop>
           <a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
         </div>

packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue

@@ -117,7 +117,7 @@ const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
         </div>
       </a-button>
       <template #overlay>
-        <div class="bg-white shadow-lg">
+        <div class="bg-white shadow-lg !border">
           <div>
             <div class="nc-menu-item" @click="exportFile(ExportTypes.CSV)">
               <MdiDownloadIcon />

packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue

@@ -46,7 +46,7 @@ watch(
       </a-button>
     </div>
     <template #overlay>
-      <div class="bg-gray-50 p-6 shadow-lg menu-filter-dropdown min-w-[400px] max-h-[max(80vh,500px)] overflow-auto">
+      <div class="bg-gray-50 p-6 shadow-lg menu-filter-dropdown min-w-[400px] max-h-[max(80vh,500px)] overflow-auto !border">
         <div v-if="sorts?.length" class="sort-grid mb-2" @click.stop>
           <template v-for="(sort, i) in sorts || []" :key="i">
             <!--          <v-icon :key="`${i}icon`" class="nc-sort-item-remove-btn" small @click.stop="deleteSort(sort)"> mdi-close-box </v-icon> -->

packages/nc-gui-v2/components/smartsheet/Toolbar.vue

@@ -15,10 +15,10 @@ const { isGrid, isForm } = useSmartsheetStoreOrThrow()
     <SmartsheetToolbarShareView v-if="isForm || isGrid" />
 
     <SmartsheetToolbarMoreActions v-if="isGrid" />
+    <div class="flex-1" />
+    <SmartsheetToolbarSearchData v-if="isGrid" class="shrink mr-2" />
 
-    <SmartsheetToolbarSearchData v-if="isGrid" class="shrink ml-2" />
 
-    <div class="flex-1" />
   </div>
 </template>