Fixed multiple boards new form scrolling

When the milestone dropdown is open, it isn't very obvious that you need to scroll.
This fixes that by taking the dropdown out of the other dropdown

Closes #1897

app/assets/javascripts/boards/components/board_new_form.js

@@ -59,9 +59,20 @@ const extraMilestones = require('../mixins/extra_milestones');
       },
     },
     methods: {
-      loadMilestones() {
+      loadMilestones(e) {
         this.milestoneDropdownOpen = !this.milestoneDropdownOpen;
         BoardService.loadMilestones.call(this);
+
+        if (this.milestoneDropdownOpen) {
+          this.$nextTick(() => {
+            const milestoneDropdown = this.$refs.milestoneDropdown;
+            const rect = e.target.getBoundingClientRect();
+
+            milestoneDropdown.style.left = `${rect.left}px`;
+            milestoneDropdown.style.top = `${rect.bottom}px`;
+            milestoneDropdown.style.width = `${rect.width}px`;
+          });
+        }
       },
       submit() {
         gl.boardService.createBoard(this.board)

app/assets/stylesheets/pages/boards.scss

@@ -574,8 +574,7 @@
   margin-top: 10px;
 
   .dropdown-menu {
-    top: 60px;
-    min-width: 100%;
+    position: fixed;
   }
 }
 

app/views/projects/boards/components/_form.html.haml

@@ -14,10 +14,11 @@
       %label.label-light{ for: "board-milestone" }
         Board milestone
       %button.dropdown-menu-toggle.wide{ type: "button",
-        "@click.stop.prevent" => "loadMilestones" }
+        "@click.stop.prevent" => "loadMilestones($event)" }
         {{ milestoneToggleText }}
         = icon("chevron-down")
-      .dropdown-menu.dropdown-menu-selectable{ "v-if" => "milestoneDropdownOpen" }
+      .dropdown-menu.dropdown-menu-selectable{ "v-if" => "milestoneDropdownOpen",
+        ref: "milestoneDropdown" }
         .dropdown-content
           %ul
             %li{ "v-for" => "milestone in extraMilestones" }