#1675 common css for filter dropdown

packages/nc-gui/assets/style/style.css

@@ -114,23 +114,18 @@ html {
   overflow: hidden;
 }
 
-
 [v-cloak] {
   display: none !important;
 }
 
-
 .v-btn {
   margin: 0 2px;
 }
 
-
-
 html {
   overflow-y: auto !important;
 }
 
-
 /* nested expansion panel bug  */
 
 .v-expansion-panel-header {
@@ -141,7 +136,6 @@ html {
   min-height: 64px !important;
 }
 
-
 /* Table validation message */
 /*table .v-input__control {*/
 /*  position: relative;*/
@@ -152,13 +146,11 @@ html {
 /*  bottom: -4px;*/
 /*}*/
 
-
 /*table edit dialog buttons*/
 .v-small-dialog__actions button span {
   font-weight: bolder;
 }
 
-
 /*resizer*/
 
 .vertical-resizer {
@@ -219,15 +211,25 @@ html {
   background: linear-gradient(180deg, black, rgb(55, 55, 55));
 }
 
-
 .yellow-orange-gradient {
-  background: -moz-linear-gradient(left, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
+  background: -moz-linear-gradient(
-  background: -webkit-linear-gradient(left, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
+    left,
-  background: linear-gradient(to right, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
+    rgba(241, 231, 103, 1) 0%,
+    rgba(254, 182, 69, 1) 100%
+  );
+  background: -webkit-linear-gradient(
+    left,
+    rgba(241, 231, 103, 1) 0%,
+    rgba(254, 182, 69, 1) 100%
+  );
+  background: linear-gradient(
+    to right,
+    rgba(241, 231, 103, 1) 0%,
+    rgba(254, 182, 69, 1) 100%
+  );
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1e767', endColorstr='#feb645', GradientType=1);
 }
 
-
 .white-gradient {
   background: linear-gradient(45deg, white, lightskyblue);
 }
@@ -248,7 +250,6 @@ html {
   background: linear-gradient(70deg, #fcbb07, #fcbb07);
 }
 
-
 .img-animation {
   animation-name: vibrate;
   animation-duration: 1.5s;
@@ -262,7 +263,6 @@ html {
 
 @keyframes vibrate {
   0% {
-
     transform: translateY(10px);
   }
   100% {
@@ -270,26 +270,21 @@ html {
   }
 }
 
-
 .search-overlay .v-overlay__content {
   height: 100%;
   width: 100%;
-
 }
 
-
 /* Draggable tree hover color */
 
 .theme--dark .vtl-tree-node:hover {
   background-color: rgb(94, 94, 94) !important;
 }
 
-
 .theme--light .vtl-tree-node:hover {
   background-color: rgb(240, 240, 240) !important;
 }
 
-
 /*vue tree list icon font */
 
 /*.sql-query-treeview .vtl-icon-folder:before {*/
@@ -316,8 +311,8 @@ html {
   padding-top: 5px !important;
   padding-bottom: 5px !important;
 }
-.sql-query-treeview .custom-run-icon{}
+.sql-query-treeview .custom-run-icon {
-
+}
 
 .sql-editor .v-expansion-panel-header {
   min-height: 36px !important;
@@ -327,7 +322,6 @@ html {
   min-height: 40px !important;
 }
 
-
 .api-client .v-expansion-panel-header {
   min-height: 36px !important;
   padding: 0 0 0 10px;
@@ -344,7 +338,7 @@ html {
 }
 
 .sql-query-treeview .vtl-operation {
-  margin-left: 2px !important;;
+  margin-left: 2px !important;
 }
 .sql-query-treeview .vtl-tree-node {
   display: flex;
@@ -354,7 +348,6 @@ html {
   flex-grow: 1;
 }
 
-
 .ignore-height-style table .v-input__control {
   height: auto !important;
 }
@@ -362,3 +355,10 @@ html {
 .cursor-pointer {
   cursor: pointer;
 }
+
+
+/* sorting and filter */
+.menu-filter-dropdown {
+  max-height: 500px;
+  overflow-y: scroll;
+}

packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="backgroundColor pa-2"
+    class="backgroundColor pa-2 menu-filter-dropdown"
-    style="width:530px; max-height: 500px; overflow-y:scroll;"
+    style="width:530px;"
   >
     <div class="grid" @click.stop>
       <template v-for="(filter,i) in filters" dense>

packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue

@@ -27,7 +27,7 @@
         </v-btn>
       </v-badge>
     </template>
-    <div class="backgroundColor pa-2" style="min-width: 330px; max-height: 500px; overflow-y:scroll;">
+    <div class="backgroundColor pa-2 menu-filter-dropdown" style="min-width: 330px;">
       <div class="sort-grid" @click.stop>
         <template v-for="(sort,i) in sortList" dense>
           <v-icon :key="i + 'icon'" class="nc-sort-item-remove-btn" small @click.stop="sortList.splice(i,1)">