Remove duplicate scroll bar from issue board switcher

ee/app/assets/javascripts/boards/components/boards_selector.vue

@@ -217,6 +217,7 @@ export default {
     <span class="boards-selector-wrapper js-boards-selector-wrapper">
       <gl-dropdown
         toggle-class="dropdown-menu-toggle js-dropdown-toggle"
+        menu-class="flex-column"
         :text="board.name"
         @show="loadBoards"
       >
@@ -230,11 +231,10 @@ export default {
           <gl-search-box v-if="!loading" ref="searchBox" v-model="filterTerm" />
         </gl-dropdown-header>
 
-        <div class="dropdown-content-faded-mask js-scroll-fade" :class="scrollFadeClass">
         <div
           v-if="!loading"
           ref="content"
-            class="dropdown-list js-dropdown-list"
+          class="dropdown-content flex-fill"
           @scroll.passive="throttledSetScrollFade"
         >
           <gl-dropdown-item
@@ -260,7 +260,12 @@ export default {
             }}
           </gl-dropdown-item>
         </div>
-        </div>
+
+        <div
+          v-show="filteredBoards.length > 0"
+          class="dropdown-content-faded-mask"
+          :class="scrollFadeClass"
+        ></div>
 
         <gl-loading-icon v-if="loading" class="dropdown-loading" />
 

ee/app/assets/stylesheets/pages/boards.scss

@@ -104,10 +104,10 @@
 }
 
 .boards-switcher {
-  .dropdown-content-faded-mask .dropdown-list {
-    // the following is no longer necessary after https://gitlab.com/gitlab-org/gitlab-ee/issues/8855
-    $search-box-height: 50px;
-    max-height: calc(#{$dropdown-max-height} - #{$search-box-height});
+  .dropdown-menu.show {
+    // we cannot use d-flex from Bootstrap because of !important
+    // see https://gitlab.com/gitlab-org/gitlab-ui/issues/38
+    display: flex;
   }
 
   // the following is a workaround until we have it fixed in gitlab-ui