Use single select for roles on member screen

app/assets/stylesheets/content/_select2.scss

@@ -335,3 +335,7 @@ $se2-arrow-button-width: 32px;
     }
   }
 }
+
+.select2-search-choice-close {
+  top: 3px;
+}

app/views/members/_member_form_non_impaired.html.erb

@@ -38,7 +38,7 @@ See doc/COPYRIGHT.rdoc for more details.
   <div class="form--section">
     <div id="new-member-message"></div>
     <div class="grid-block">
-      <div class="grid-block medium-6">
+      <div class="grid-block medium-4">
         <div class="form--field">
           <%
              user_id_title = I18n.t(:label_principal_search)
@@ -60,12 +60,14 @@ See doc/COPYRIGHT.rdoc for more details.
       </div>
     </div>
     <div class="grid-block">
-      <div class="grid-block medium-6">
+      <div class="grid-block">
         <div class="form--field">
           <%= styled_label_tag :member_role_ids, l(:label_role_search) %>
+          <div class="form--field-container">
+            <div class="form--select-container -auto">
               <% options = roles.collect { |obj| [obj.name, obj.id] } %>
               <%= select_tag 'member[role_ids]', options_for_select(options),
-                           multiple: true,
+                               multiple: false,
                                no_label: true,
                                title: l(:label_role_search),
                                tabIndex: 0,
@@ -73,6 +75,8 @@ See doc/COPYRIGHT.rdoc for more details.
             </div>
           </div>
         </div>
+      </div>
+    </div>
     <%= f.button l(:button_add), id: 'member-add-submit',
           class: 'button -highlight -with-icon icon-yes' %>
     <%= link_to I18n.t('button_cancel'), :back, class: 'button' %>