Reduce the default height of MR/branch dropdowns61332-web-ide-mr-branch-dropdown-closes-unexpectedly

To avoid having empty areas in the dropdown that occupy
unnessary space, I removed the dropdown's min-height and changed
its default height in empty state to be same as its loading state
(with the spinner).

3 files changed, 6 insertions, 7 deletions

diff --git a/app/assets/javascripts/ide/components/branches/search_list.vue b/app/assets/javascripts/ide/components/branches/search_list.vue
index 5e82d1150a0..db8365a08e0 100644
--- a/app/assets/javascripts/ide/components/branches/search_list.vue
+++ b/app/assets/javascripts/ide/components/branches/search_list.vue
@@ -67,7 +67,7 @@ export default {
         class="form-control dropdown-input-field"
         @input="searchBranches"
       />
-      <icon :size="18" name="search" class="input-icon" />
+      <icon :size="18" name="search" class="ml-3 input-icon" />
     </label>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <gl-loading-icon
@@ -75,7 +75,7 @@ export default {
         :size="2"
         class="mt-3 mb-3 align-self-center ml-auto mr-auto"
       />
-      <ul v-else class="mb-3 w-100">
+      <ul v-else class="mb-0 w-100">
         <template v-if="hasBranches">
           <li v-for="item in branches" :key="item.name">
             <item :item="item" :project-id="currentProjectId" :is-active="isActiveBranch(item)" />
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
index 6b9c83bad6c..5daf2d1422c 100644
--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/list.vue
@@ -85,7 +85,7 @@ export default {
         @input="searchMergeRequests"
         @removeToken="setSearchType(null)"
       />
-      <icon :size="18" name="search" class="input-icon" />
+      <icon :size="18" name="search" class="ml-3 input-icon" />
     </label>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <gl-loading-icon
@@ -94,7 +94,7 @@ export default {
         class="mt-3 mb-3 align-self-center ml-auto mr-auto"
       />
       <template v-else>
-        <ul class="mb-3 w-100">
+        <ul class="mb-0 w-100">
           <template v-if="showSearchTypes">
             <li v-for="searchType in $options.searchTypes" :key="searchType.type">
               <button
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 551c7cf5deb..ba126d59eef 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -1188,7 +1188,7 @@ $ide-commit-header-height: 48px;
 
     .input-icon {
       right: auto;
-      left: 26px;
+      left: 10px;
       top: 50%;
       transform: translateY(-50%);
     }
@@ -1216,11 +1216,10 @@ $ide-commit-header-height: 48px;
 }
 
 .ide-search-list-empty {
-  height: 230px;
+  height: 69px;
 }
 
 .ide-merge-requests-dropdown-content {
-  min-height: 230px;
   max-height: 470px;
 }