Fix css for saved filters dropdown [SCI-6516] (#3843)

Co-authored-by: Anton <anton@scinote.net>

app/assets/stylesheets/repository/filters.scss

@@ -34,6 +34,7 @@
     .saved-filters-list {
       max-height: 300px;
       overflow-y: auto;
+      width: 250px;
     }
   }
 
@@ -77,12 +78,25 @@
       .saved-filters-element {
         align-items: center;
         display: flex;
-        padding: .5em 1em;
+        padding: 0 1em;
         cursor: pointer;
 
+        &:hover {
+          background: $color-concrete;
+        }
+
+        span {
+          flex-grow: 1;
+        }
+
         .btn-light {
           color: $color-silver-chalice;
+          flex-shrink: 0;
           margin-left: auto;
+
+          &:hover {
+            color: $color-black;
+          }
         }
       }
     }

app/javascript/packs/vue/repository_filter.js

@@ -86,6 +86,7 @@ window.initRepositoryFilter = () => {
     created() {
       this.dataTableElement = $($('#filterContainer').data('datatable-id'));
     },
+
     components: {
       'filter-container': FilterContainer
     },

app/javascript/vue/repository_filter/container.vue

@@ -75,7 +75,8 @@
     },
     data() {
       return {
-        filters: this.defaultFilters
+        filters: this.defaultFilters,
+        savedFilterScrollbar: null
       }
     },
     components: { ColumnElement, FilterElement, SavedFilterElement },
@@ -141,6 +142,11 @@
       },
       toggleSavedFilters(e) {
         e.stopPropagation();
+        if (this.savedFilterScrollbar) {
+          this.savedFilterScrollbar.update();
+        } else {
+          this.savedFilterScrollbar = new PerfectScrollbar($('.saved-filters-list')[0]);
+        }
         this.closeColumnsFilters();
         $('#savedFiltersContainer').toggleClass('open');
       },

app/javascript/vue/repository_filter/saved_filter.vue

@@ -2,7 +2,7 @@
   <div class="saved-filters-element">
     <span @click="loadFilters">{{ savedFilter.attributes.name }}</span>
     <button v-if="canManageFilters" class="btn btn-light icon-btn" @click="deleteFilter">
-      <i class="fas fa-trash"></i>
+      <i :title="i18n.t('repositories.show.filters.delete_saved_filter')" class="fas fa-trash"></i>
     </button>
   </div>
 </template>

config/locales/en.yml

@@ -1410,6 +1410,7 @@ en:
         clear: "Clear"
         add_filter: "Add filter"
         apply: "Show results"
+        delete_saved_filter: "Delete the saved filter"
       repository_filter:
         errors:
           column_not_found: "Filtering failed because one or more columns no longer exist. Please update your filter."