Fix overlapping elements in add member form

app/assets/stylesheets/_misc_legacy.sass

@@ -609,24 +609,39 @@ a.impaired--empty-link,
 #members_add_form
   .-flex
     display: flex
-    align-items: center
+    align-items: flex-end
+
+    .form--field,
+    #member-add-submit-button--container
+      margin-bottom: 1px
+      flex-basis: 50%
 
   // Override default margin to allow correct vertical alignment
   #add-member--submit-button
-    // workaround to put the button next to the select box
-    flex-basis: 100%
-    margin-right: 65%
-
     margin-bottom: 0
     margin-left: 1rem
-    margin-top: 0.5rem
     // Neccessary so that button and select box have the same height
     line-height: 0.6rem
 
 @include breakpoint(680px down)
-  #members_add_form
+  #members_add_form .-flex
-    .-flex
+    align-items: flex-start
-      align-items: flex-start
+
+    &.-with-button
       flex-direction: column
+      // Workaround for safari and IE
+      // They are not able to get the correct height with flex-direction: column
+      height: 120px
+
     #add-member--submit-button
-      margin-left: 0
+      margin-left: 0
+    .form--field
+      margin-bottom: 1rem
+
+@media screen and (max-width: 970px) and (min-width: 681px)
+  #members_add_form .-flex.-with-button
+    .form--field
+      max-width: 50%
+      select
+        max-width: 66%
+

app/assets/stylesheets/content/_forms.sass

@@ -68,7 +68,7 @@ $form--field-types: (text-field, text-area, select, check-box, radio-button, ran
       padding: 10px 20px 0 20px
 
     &.-medium-compressed
-      padding: 20px 20px 10px 20px
+      padding: 10px 20px 20px 20px
 
   &.danger-zone
     border: 1px solid $content-form-danger-zone-bg-color

app/views/members/_member_form_non_impaired.html.erb

@@ -36,7 +36,7 @@ See doc/COPYRIGHT.rdoc for more details.
   <a title="{{ ::I18n.t('js.close_form_title') }}" class="form--close icon-context icon-close" onClick="hideAddMemberForm()"></a>
   <div id="new-member-message"></div>
   <div class="grid-block">
-    <div class="grid-content medium-5 small-12 collapse">
+    <div class="grid-content medium-5 small-12 collapse -flex">
       <div class="form--field">
         <%
            user_id_title = I18n.t(:label_principal_search)
@@ -57,7 +57,7 @@ See doc/COPYRIGHT.rdoc for more details.
                          class: "select2-select remote" %>
       </div>
     </div>
-    <div class="grid-content medium-7 small-12 -flex">
+    <div class="grid-content medium-7 small-12 -flex -with-button">
       <div class="form--field">
         <%= styled_label_tag :member_role_ids, l(:label_role_search) %>
         <div class="form--field-container">
@@ -73,9 +73,11 @@ See doc/COPYRIGHT.rdoc for more details.
           </div>
         </div>
       </div>
-      <%= f.button l(:button_add), id: 'member-add-submit',
+      <div id="member-add-submit-button--container">
-            class: 'button -highlight -with-icon icon-checkmark',
+        <%= f.button l(:button_add), id: 'member-add-submit',
-            id: 'add-member--submit-button' %>
+              class: 'button -highlight -with-icon icon-checkmark',
+              id: 'add-member--submit-button' %>
+      </div>
     </div>
   </div>
 <% end %>