Select2 dropdown autoWidth

app/assets/javascripts/main.js.coffee

@@ -68,7 +68,7 @@ $ ->
     e.preventDefault()
 
   # Initialize select2 selects
-  $('select.select2').select2(width: 'resolve')
+  $('select.select2').select2(width: 'resolve', dropdownAutoWidth: true)
 
   # Initialize tooltips
   $('.has_tooltip').tooltip()

app/assets/stylesheets/generic/selects.scss

@@ -2,11 +2,20 @@
 
 .select2-container {
   .select2-choice {
-    background: #EEE;
+    background: #FFF;
     border-color: #BBB;
+
+    .select2-arrow {
+      background: #FFF;
+    }
   }
 }
 
+.select2-drop-active {
+  border: 1px solid #BBB;
+  margin-top: 4px;
+}
+
 select {
   &.select2 {
     width: 100px;
@@ -51,3 +60,9 @@ select {
     }
   }
 }
+
+
+/** Branch/tag selector **/
+.project-refs-form .select2-container {
+  margin-right: 10px;
+}

app/assets/stylesheets/sections/projects.scss

@@ -75,7 +75,7 @@
   .project-home-dropdown + & {
     margin-right: 45px;
   }
-  
+
   .btn,
   .form-control {
     border: 1px solid #E1E1E1;
@@ -234,39 +234,6 @@ ul.nav.nav-projects-tabs {
   min-width: 200px;
 }
 
-/** Branch/tag selector **/
-.project-refs-form {
-  margin: 0;
-  span {
-    background:none !important;
-    position:static !important;
-    width:auto !important;
-    height:auto !important;
-  }
-}
-
-.project-refs-form .select2-container {
-  position: relative;
-  top: 0;
-  left: 0;
-  margin-right: 10px;
-
-  .select2-single span {
-    font-weight: bold;
-    color: #555;
-  }
-
-  &.select2-container-active {
-    .select2-drop {
-      min-width: 400px;
-    }
-
-    .select2-results {
-      max-height: 400px;
-    }
-  }
-}
-
 .deploy-project-label {
   margin: 1px;
 }