fix(nc-gui): toolbar menu dropdown outer padding issue

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

@@ -337,15 +337,16 @@ function isDateType(uidt: UITypes) {
   <div
     class="menu-filter-dropdown"
     :class="{
-      'max-h-[max(80vh,500px)] min-w-112 py-6 pl-6': !nested,
+      'max-h-[max(80vh,500px)] min-w-112 py-2 pl-4': !nested,
       'w-full ': nested,
+      'py-4': !filters.length,
     }"
   >
     <div
       v-if="filters && filters.length"
       ref="wrapperDomRef"
-      class="flex flex-col gap-y-3 nc-filter-grid pb-2 w-full"
+      class="flex flex-col gap-y-3 nc-filter-grid w-full"
-      :class="{ 'max-h-420px nc-scrollbar-md  pr-3.5 nc-filter-top-wrapper': !nested }"
+      :class="{ 'max-h-420px nc-scrollbar-thin nc-filter-top-wrapper pr-4 my-2 py-1': !nested }"
       @click.stop
     >
       <template v-for="(filter, i) in filters" :key="i">
@@ -544,7 +545,14 @@ function isDateType(uidt: UITypes) {
     </div>
 
     <template v-if="isEeUI && !isPublic">
-      <div v-if="filtersCount < getPlanLimit(PlanLimitTypes.FILTER_LIMIT)" ref="addFiltersRowDomRef" class="flex gap-2">
+      <div
+        v-if="filtersCount < getPlanLimit(PlanLimitTypes.FILTER_LIMIT)"
+        ref="addFiltersRowDomRef"
+        class="flex gap-2"
+        :class="{
+          'mt-1 mb-2': filters.length,
+        }"
+      >
         <NcButton size="small" type="text" class="!text-brand-500" @click.stop="addFilter()">
           <div class="flex items-center gap-1">
             <component :is="iconMap.plus" />
@@ -563,7 +571,13 @@ function isDateType(uidt: UITypes) {
       </div>
     </template>
     <template v-else>
-      <div ref="addFiltersRowDomRef" class="flex gap-2">
+      <div
+        ref="addFiltersRowDomRef"
+        class="flex gap-2"
+        :class="{
+          'mt-1 mb-2': filters.length,
+        }"
+      >
         <NcButton size="small" type="text" class="!text-brand-500" @click.stop="addFilter()">
           <div class="flex items-center gap-1">
             <component :is="iconMap.plus" />

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

@@ -133,7 +133,7 @@ watch(
           alt="No search results found"
         />
 
-        {{ $t('title.noResultsMatchedYourSearch') }}
+        {{ options.length ? $t('title.noResultsMatchedYourSearch') : 'The list is empty' }}
       </div>
 
       <div

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

@@ -251,19 +251,14 @@ watch(meta, async () => {
       />
       <div
         v-else
-        :class="{ ' min-w-[400px]': _groupBy.length }"
+        class="flex flex-col bg-white overflow-auto nc-group-by-list menu-filter-dropdown max-h-[max(80vh,500px)] min-w-102 pt-2 pb-2 pl-4"
-        class="flex flex-col bg-white overflow-auto nc-group-by-list menu-filter-dropdown max-h-[max(80vh,500px)] py-6 pl-6"
         data-testid="nc-group-by-menu"
       >
-        <div
+        <div class="group-by-grid max-h-100 nc-scrollbar-thing pr-4 py-2" @click.stop>
-          class="group-by-grid pb-1 max-h-100 nc-scrollbar-md pr-5"
-          :class="{ 'mb-2': availableColumns.length && fieldsToGroupBy.length > _groupBy.length && _groupBy.length < 3 }"
-          @click.stop
-        >
           <template v-for="[i, group] of Object.entries(_groupBy)" :key="`grouped-by-${group.fk_column_id}`">
             <LazySmartsheetToolbarFieldListAutoCompleteDropdown
               v-model="group.fk_column_id"
-              class="caption nc-sort-field-select"
+              class="caption nc-sort-field-select w-44 flex flex-grow"
               :columns="fieldsToGroupBy"
               :allow-empty="true"
               @change="saveGroupBy"
@@ -296,10 +291,10 @@ watch(meta, async () => {
               </a-select-option>
             </NcSelect>
 
-            <a-tooltip placement="right" title="Remove">
+            <a-tooltip placement="right" title="Remove" class="flex-none min-w-40">
               <NcButton
                 v-e="['c:group-by:remove']"
-                class="nc-group-by-item-remove-btn"
+                class="nc-group-by-item-remove-btn min-w-40"
                 size="small"
                 type="text"
                 @click.stop="removeFieldFromGroupBy(i)"
@@ -317,7 +312,7 @@ watch(meta, async () => {
         >
           <NcButton
             v-e="['c:group-by:add']"
-            class="nc-add-group-by-btn !text-brand-500"
+            class="nc-add-group-by-btn !text-brand-500 mt-1 mb-2"
             style="width: fit-content"
             size="small"
             type="text"
@@ -346,7 +341,7 @@ watch(meta, async () => {
 <style scoped>
 .group-by-grid {
   display: grid;
-  grid-template-columns: auto 150px 22px;
+  grid-template-columns: auto 150px auto;
-  @apply gap-[12px];
+  @apply gap-x-2 gap-y-3;
 }
 </style>

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

@@ -139,13 +139,8 @@ onMounted(() => {
     </div>
     <template #overlay>
       <SmartsheetToolbarCreateSort v-if="!sorts.length" :is-parent-open="open" @created="addSort" />
-      <div
+      <div v-else class="pt-2 pb-2 pl-4 nc-filter-list max-h-[max(80vh,30rem)] min-w-102" data-testid="nc-sorts-menu">
-        v-else
+        <div class="sort-grid max-h-120 nc-scrollbar-thin pr-4 my-2 py-1" @click.stop>
-        :class="{ 'min-w-102': sorts.length }"
-        class="py-6 pl-6 nc-filter-list max-h-[max(80vh,30rem)]"
-        data-testid="nc-sorts-menu"
-      >
-        <div class="sort-grid max-h-120 nc-scrollbar-md" :class="{ 'pr-3.5': sorts?.length }" @click.stop>
           <template v-for="(sort, i) of sorts" :key="i">
             <SmartsheetToolbarFieldListAutoCompleteDropdown
               v-model="sort.fk_column_id"
@@ -198,14 +193,13 @@ onMounted(() => {
           v-if="availableColumns.length"
           v-model:visible="showCreateSort"
           :trigger="['click']"
-          class="mt-3"
           overlay-class-name="nc-toolbar-dropdown"
         >
           <template v-if="isEeUI && !isPublic">
             <NcButton
               v-if="sorts.length < getPlanLimit(PlanLimitTypes.SORT_LIMIT)"
               v-e="['c:sort:add']"
-              class="!text-brand-500"
+              class="!text-brand-500 mt-1 mb-2"
               type="text"
               size="small"
               @click.stop="showCreateSort = true"
@@ -219,7 +213,13 @@ onMounted(() => {
             <span v-else></span>
           </template>
           <template v-else>
-            <NcButton v-e="['c:sort:add']" class="!text-brand-500" type="text" size="small" @click.stop="showCreateSort = true">
+            <NcButton
+              v-e="['c:sort:add']"
+              class="!text-brand-500 mt-1 mb-2"
+              type="text"
+              size="small"
+              @click.stop="showCreateSort = true"
+            >
               <div class="flex gap-1 items-center">
                 <component :is="iconMap.plus" />
                 <!-- Add Sort Option -->