Use single js- wrapper class to show/hide

app/assets/javascripts/repo/components/repo_edit_button.vue

@@ -29,12 +29,10 @@ export default {
     editMode() {
       if (this.editMode) {
         $('.project-refs-form').addClass('disabled');
-        $('.fa-long-arrow-right').show();
-        $('.project-refs-target-form').show();
+        $('.js-tree-ref-target-holder').show();
       } else {
         $('.project-refs-form').removeClass('disabled');
-        $('.fa-long-arrow-right').hide();
-        $('.project-refs-target-form').hide();
+        $('.js-tree-ref-target-holder').hide();
       }
     },
   },

app/assets/javascripts/repo/index.js

@@ -7,8 +7,7 @@ import RepoEditButton from './components/repo_edit_button.vue';
 import Translate from '../vue_shared/translate';
 
 function initDropdowns() {
-  $('.project-refs-target-form').hide();
-  $('.fa-long-arrow-right').hide();
+  $('.js-tree-ref-target-holder').hide();
 }
 
 function addEventsForNonVueEls() {

app/assets/stylesheets/pages/tree.scss

@@ -29,6 +29,10 @@
         margin-right: 15px;
       }
 
+      .tree-ref-target-holder {
+        display: inline-block;
+      }
+
       .repo-breadcrumb {
         li:last-of-type {
           position: relative;

app/views/projects/tree/_tree_header.html.haml

@@ -2,8 +2,9 @@
   .tree-ref-holder
     = render 'shared/ref_switcher', destination: 'tree', path: @path
     - if show_new_repo?
-      = icon('long-arrow-right', title: 'to target branch')
-      = render 'shared/target_switcher', destination: 'tree', path: @path
+      .tree-ref-target-holder.js-tree-ref-target-holder
+        = icon('long-arrow-right', title: 'to target branch')
+        = render 'shared/target_switcher', destination: 'tree', path: @path
 
   - unless show_new_repo?
     = render 'projects/tree/old_tree_header'