Fix MR target branch selector dropdown placement cut-off

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/31271

When the dropdown items are too wide, constrain the dropdown to the
offsetParent. Otherwise, let it naturally flow as Select2 wants.

app/assets/javascripts/dispatcher.js

@@ -184,6 +184,26 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new LabelsSelect();
           new MilestoneSelect();
           new gl.IssuableTemplateSelectors();
+
+          const targetBranchDropdownClass = 'js-select-target-branch-dropdown';
+          $('.js-select-target-branch').select2({
+            dropdownCssClass: targetBranchDropdownClass,
+            dropdownCss() {
+              const styles = {};
+              const $dropdown = $(`.${targetBranchDropdownClass}`);
+
+              // We have to look at the parent beacuse
+              // `offsetParent` on a `display: none;` is `null`
+              const offsetParentWidth = $(this).parent().offsetParent().width();
+              // Reset any width to let it naturally flow
+              $dropdown.css('width', 'auto');
+              if ($dropdown.outerWidth(false) > offsetParentWidth) {
+                styles.width = offsetParentWidth;
+              }
+
+              return styles;
+            },
+          });
           break;
         case 'projects:tags:new':
           new ZenMode();

app/assets/stylesheets/pages/merge_requests.scss

@@ -482,6 +482,10 @@
   }
 }
+.target-branch-selector-dropdown-container {
+  position: relative;
+}
+
 .assign-to-me-link {
   padding-left: 12px;
   white-space: nowrap;

app/views/shared/issuable/form/_branch_chooser.html.haml

@@ -10,12 +10,16 @@
     = form.label :source_branch, class: 'control-label'
     .col-sm-10
       .issuable-form-select-holder
-        = form.select(:source_branch, [issuable.source_branch], {}, { class: 'source_branch select2 span2', disabled: true })
+        = form.select(:source_branch, [issuable.source_branch], {}, { class: 'source_branch select2', disabled: true })
 .form-group
   = form.label :target_branch, class: 'control-label'
-  .col-sm-10
+  .col-sm-10.target-branch-selector-dropdown-container
     .issuable-form-select-holder
-      = form.select(:target_branch, issuable.target_branches, { include_blank: true }, { class: 'target_branch select2 span2', disabled: issuable.new_record?, data: { placeholder: "Select branch" }})
+      = form.select(:target_branch, issuable.target_branches,
+        { include_blank: true },
+        { class: 'target_branch js-select-target-branch',
+          disabled: issuable.new_record?,
+          data: { placeholder: "Select branch" }})
     - if issuable.new_record?
        
       = link_to 'Change branches', mr_change_branches_path(issuable)