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,16 +60,20 @@ 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) %>
-          <% options = roles.collect { |obj| [obj.name, obj.id] } %>
-          <%= select_tag 'member[role_ids]', options_for_select(options),
-                           multiple: true,
-                            no_label: true,
-                           title: l(:label_role_search),
-                           tabIndex: 0,
-                           class: 'form--select' %>
+          <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: false,
+                               no_label: true,
+                               title: l(:label_role_search),
+                               tabIndex: 0,
+                               class: 'form--select' %>
+            </div>
+          </div>
         </div>
       </div>
     </div>