Scrolling fixesscrolling-fixes

2 files changed, 15 insertions, 5 deletions

diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
index 9e6692e3d21..4b5f9618d65 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -126,9 +126,9 @@
       const inputContainer = document.querySelector('.filtered-search-input-container');
       const isElementInFilteredSearch = inputContainer && inputContainer.contains(e.target);
       const isElementInFilterDropdown = e.target.closest('.filter-dropdown') !== null;
-      const isElementScrollContainer = e.target.classList.contains('scroll-container');
+      const isElementTokensContainer = e.target.classList.contains('tokens-container');
 
-      if ((!isElementInFilteredSearch && !isElementInFilterDropdown) || isElementScrollContainer) {
+      if ((!isElementInFilteredSearch && !isElementInFilterDropdown) || isElementTokensContainer) {
         gl.FilteredSearchVisualTokens.moveInputToTheRight();
         this.dropdownManager.resetDropdowns();
       }
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index d418d172434..abe81ad903a 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -35,11 +35,21 @@
   .tokens-container {
     display: -webkit-flex;
     display: flex;
-    padding-left: 0;
-    left: 30px;
+    flex: 1;
+    -webkit-flex: 1;
+    padding-left: 30px;
     position: relative;
     margin-bottom: 0;
   }
+
+  .input-token {
+    flex: 1;
+    -webkit-flex: 1;
+  }
+
+  .filtered-search-token + .input-token:not(:last-child) {
+    max-width: 200px;
+  }
 }
 
 .filtered-search-token,
@@ -162,7 +172,7 @@
 
   .clear-search {
     width: 35px;
-    background-color: transparent;
+    background-color: $white-light;
     border: none;
     position: absolute;
     right: 0;