Fix inputs in member modal forms

styles/components/_member_form.scss

@@ -5,17 +5,11 @@
     margin-left: 0;
   }
 
-  .input__inline-fields {
-    text-align: left;
-
-    .usa-input__choices label {
-      font-weight: $font-bold;
-    }
-  }
-
   .input__inline-fields {
     padding: $gap * 2;
     border: 1px solid $color-gray-lighter;
+    text-align: left;
+    max-width: 100%;
 
     &.checked {
       border: 1px solid $color-blue;
@@ -33,7 +27,7 @@
 
   .user-info {
     .usa-input {
-      width: 45rem;
+      max-width: $max-input-width;
 
       input,
       label,
@@ -53,8 +47,7 @@
   }
 }
 
-#modal--add-app-mem,
+.form-content--member-form {
-#modal--add-portfolio-manager {
   .modal__body {
     min-width: 75rem;
   }

styles/elements/_inputs.scss

@@ -371,19 +371,15 @@ select {
 .phone-input {
   display: flex;
   flex-direction: row;
+  justify-content: flex-start;
 
   &__phone {
     margin-right: $gap * 4;
+    flex-grow: 1;
 
     .usa-input {
       margin: 0;
 
-      input,
-      label,
-      .usa-input__message {
-        max-width: 20rem;
-      }
-
       .icon-validation {
         left: 20rem;
       }
@@ -391,7 +387,8 @@ select {
   }
 
   &__extension {
-    margin-left: $gap * 4;
+    margin-right: $gap * 4;
+    flex-grow: 0;
 
     .usa-input {
       margin: 0;

templates/applications/fragments/members.html

@@ -36,7 +36,7 @@
       {% set invite_expired = member.role_status == 'invite_expired' %}
       {%- if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
         {% set modal_name = "edit_member-{}".format(loop.index) %}
-        {% call Modal(modal_name, classes="form-content--app-mem") %}
+        {% call Modal(modal_name, classes="form-content--member-form") %}
           <div class="modal__form--header">
             <h1>{{ Icon('avatar') }} {{ "portfolios.applications.members.form.edit_access_header" | translate({ "user": member.user_name }) }}</h1>
           </div>
@@ -56,7 +56,7 @@
 
         {%- if invite_pending or invite_expired %}
           {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
-          {% call Modal(resend_invite_modal, classes="form-content--app-mem") %}
+          {% call Modal(resend_invite_modal, classes="form-content--member-form") %}
             <div class="modal__form--header">
               <h1>{{ "portfolios.applications.members.new.verify" | translate }}</h1>
             </div>
@@ -183,6 +183,7 @@
             modal=new_member_modal_name,
           )
         ],
+        classes="form-content--member-form",
       ) }}
   {% endif %}
   </div>

templates/components/multi_step_modal_form.html

@@ -25,10 +25,10 @@
   </div>
 {% endmacro %}
 
-{% macro MultiStepModalForm(name, form, form_action, steps, dismissable=False) -%}
+{% macro MultiStepModalForm(name, form, form_action, steps, dismissable=False, classes="") -%}
   {% set step_count = steps|length %}
   <multi-step-modal-form inline-template :steps={{ step_count }}>
-    {% call Modal(name=name, dismissable=dismissable) %}
+    {% call Modal(name=name, dismissable=dismissable, classes=classes) %}
       <form id="{{ name }}" action="{{ form_action }}" method="POST" v-on:submit="handleSubmit">
         {{ form.csrf_token }}
         <div v-if="$root.activeModal === '{{ name }}'">

templates/portfolios/fragments/portfolio_members.html

@@ -14,7 +14,7 @@
       {% set invite_expired = member.status == 'invite_expired' %}
 
       {% set modal_name = "edit_member-{}".format(loop.index) %}
-      {% call Modal(modal_name, classes="form-content--app-mem") %}
+      {% call Modal(modal_name, classes="form-content--member-form") %}
         <div class="modal__form--header">
           <h1>{{ Icon('avatar') }} {{ "portfolios.applications.members.form.edit_access_header" | translate({ "user": member.user_name }) }}</h1>
         </div>
@@ -34,7 +34,7 @@
 
       {% if invite_pending or invite_expired -%}
         {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %}
-        {% call Modal(resend_invite_modal, classes="form-content--app-mem") %}
+        {% call Modal(resend_invite_modal, classes="form-content--member-form") %}
           <div class="modal__form--header">
             <h1>{{ "portfolios.applications.members.new.verify" | translate }}</h1>
           </div>
@@ -182,6 +182,7 @@
           modal=new_manager_modal,
         )
       ],
+      classes="form-content--member-form",
     ) }}
   {% endif %}
 </div>