From d029b04516b834589886ab400b0c1e643d888175 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 8 Mar 2023 21:57:42 +0530
Subject: [PATCH] refactor(gui): sort and filter menu width

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/toolbar/ColumnFilter.vue           |  2 +-
 .../smartsheet/toolbar/SortListMenu.vue           | 15 +++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
index cdd97c001a..681524545e 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
@@ -199,7 +199,7 @@ defineExpose({
 <template>
   <div
     class="p-4 menu-filter-dropdown bg-gray-50 !border"
-    :class="{ 'shadow min-w-[430px] max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }"
+    :class="{  'min-w-[430px]': filters.length, 'shadow max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }"
   >
     <div
       v-if="filters && filters.length"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index 1bab0ce817..17bae4c241 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -23,7 +23,7 @@ const reloadDataHook = inject(ReloadViewDataHookInj)
 
 const { eventBus } = useSmartsheetStoreOrThrow()
 
-const { sorts, saveOrUpdate, loadSorts, addSort:_addSort, deleteSort } = useViewSorts(view, () => reloadDataHook?.trigger())
+const { sorts, saveOrUpdate, loadSorts, addSort: _addSort, deleteSort } = useViewSorts(view, () => reloadDataHook?.trigger())
 
 const removeIcon = ref<HTMLElement>()
 
@@ -41,7 +41,6 @@ eventBus.on((event) => {
   }
 })
 
-
 const columns = computed(() => meta.value?.columns || [])
 
 const columnByID = computed(() =>
@@ -68,8 +67,6 @@ watch(
 const open = ref(false)
 
 useMenuCloseOnEsc(open)
-
-
 </script>
 
 <template>
@@ -89,12 +86,18 @@ useMenuCloseOnEsc(open)
     </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 !border"
+        :class="{ ' min-w-[400px]': sorts.length }"
+        class="bg-gray-50 p-6 shadow-lg menu-filter-dropdown max-h-[max(80vh,500px)] overflow-auto !border"
         data-testid="nc-sorts-menu"
       >
         <div v-if="sorts?.length" class="sort-grid mb-2 max-h-420px overflow-y-auto" @click.stop>
           <template v-for="(sort, i) of sorts" :key="i">
-            <MdiCloseBox ref="removeIcon" class="nc-sort-item-remove-btn text-grey self-center" small @click.stop="deleteSort(sort, i)" />
+            <MdiCloseBox
+              ref="removeIcon"
+              class="nc-sort-item-remove-btn text-grey self-center"
+              small
+              @click.stop="deleteSort(sort, i)"
+            />
 
             <LazySmartsheetToolbarFieldListAutoCompleteDropdown
               v-model="sort.fk_column_id"