Adjust the margin around usa-input elements globally, fix any styling side effects from the change

styles/elements/_inputs.scss

@@ -57,13 +57,9 @@
 }
 
 .usa-input {
-  margin: ($gap * 4) ($gap * 2) ($gap * 4) 0;
+  margin: ($gap * 2) 0;
   max-width: 75rem;
 
-  @include media($medium-screen) {
-    margin: ($gap * 4) 0;
-  }
-
   label {
     padding: 0 0 ($gap / 2) 0;
     margin: 0;
@@ -363,6 +359,8 @@ select {
     margin-right: $gap * 4;
 
     .usa-input {
+      margin: 0;
+
       input,
       label,
       .usa-input__message {
@@ -379,6 +377,8 @@ select {
     margin-left: $gap * 4;
 
     .usa-input {
+      margin: 0;
+
       input {
         max-width: 12rem;
       }

styles/sections/_application_edit.scss

@@ -18,7 +18,6 @@
     }
 
     .usa-input {
-      margin: 0 ($gap * 4) 0 0;
       flex-grow: 2;
     }
   }
@@ -58,11 +57,8 @@
     }
   }
 
-  .form-row {
-    margin-top: 0;
-
+  .application-member__user-info {
     .usa-input {
-      margin: 0;
       width: 45rem;
 
       input,

templates/applications/fragments/member_form_fields.html

@@ -52,20 +52,13 @@
 {% endmacro %}
 
 {% macro InfoFields(member_form) %}
-  <div class='form-row'>
+  <div class="application-member__user-info">
+
+  </div>
   {{ TextInput(member_form.first_name, validation='requiredField', optional=False) }}
-  </div>
-  <div class='form-row'>
   {{ TextInput(member_form.last_name, validation='requiredField', optional=False) }}
-  </div>
-  <div class='form-row'>
   {{ TextInput(member_form.email, validation='email', optional=False) }}
-  </div>
-  <div class="form-row">
   {{ PhoneInput(member_form.phone_number, member_form.phone_ext)}}
-  </div>
-  <div class='form-row'>
   {{ TextInput(member_form.dod_id, validation='dodId', optional=False) }}
-  </div>
   <a href="#">How do I find the DoD ID?</a>
 {% endmacro %}

templates/components/phone_input.html

@@ -1,7 +1,7 @@
 {% from "components/text_input.html" import TextInput %}
 
 {% macro PhoneInput(phone_number, phone_ext, placeholder_phone="", phone_optional=True, extension_optional=True) %}
-  <div class='phone-input'>
+  <div class='usa-input phone-input'>
       <div class='phone-input__phone'>
         {{ TextInput(phone_number, placeholder=placeholder_phone, validation='usPhone', optional=phone_optional) }}
       </div>

translations.yaml

@@ -314,7 +314,7 @@ portfolios:
       step_1_button_text: "Save and Add Environments"
       step_1_form_help_text:
         name: |
-          <div style="margin-top: -3rem;">
+          <div>
             <p>
               The name of your application should be intuitive and easily recognizable for all of your team members.
             </p>
@@ -326,7 +326,7 @@ portfolios:
             </p>
           </div>
         description: |
-          <div style="margin-top: -3rem;">
+          <div>
             <p>
               Add a brief one to two sentence description of your application. You should be able to reference your TO Description of Work.
             </p>