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,38 +231,42 @@ 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"
-            @scroll.passive="throttledSetScrollFade"
+        <div
+          v-if="!loading"
+          ref="content"
+          class="dropdown-content flex-fill"
+          @scroll.passive="throttledSetScrollFade"
+        >
+          <gl-dropdown-item
+            v-show="filteredBoards.length === 0"
+            class="no-pointer-events text-secondary"
           >
-            <gl-dropdown-item
-              v-show="filteredBoards.length === 0"
-              class="no-pointer-events text-secondary"
-            >
-              {{ s__('IssueBoards|No matching boards found') }}
-            </gl-dropdown-item>
+            {{ s__('IssueBoards|No matching boards found') }}
+          </gl-dropdown-item>
 
-            <gl-dropdown-item
-              v-for="otherBoard in filteredBoards"
-              :key="otherBoard.id"
-              class="js-dropdown-item"
-              :href="`${boardBaseUrl}/${otherBoard.id}`"
-            >
-              {{ otherBoard.name }}
-            </gl-dropdown-item>
-            <gl-dropdown-item v-if="hasMissingBoards" class="small unclickable">
-              {{
-                s__(
-                  'IssueBoards|Some of your boards are hidden, activate a license to see them again.',
-                )
-              }}
-            </gl-dropdown-item>
-          </div>
+          <gl-dropdown-item
+            v-for="otherBoard in filteredBoards"
+            :key="otherBoard.id"
+            class="js-dropdown-item"
+            :href="`${boardBaseUrl}/${otherBoard.id}`"
+          >
+            {{ otherBoard.name }}
+          </gl-dropdown-item>
+          <gl-dropdown-item v-if="hasMissingBoards" class="small unclickable">
+            {{
+              s__(
+                'IssueBoards|Some of your boards are hidden, activate a license to see them again.',
+              )
+            }}
+          </gl-dropdown-item>
         </div>
 
+        <div
+          v-show="filteredBoards.length > 0"
+          class="dropdown-content-faded-mask"
+          :class="scrollFadeClass"
+        ></div>
+
         <gl-loading-icon v-if="loading" class="dropdown-loading" />
 
         <div v-if="canAdminBoard">

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