Apply max width to all input elements.

Update form class with better name and add form-conrainer--narrow class.

styles/components/_forms.scss

@@ -22,8 +22,9 @@
     }
 
     .usa-input {
-      input {
+      input,
-        max-width: none;
+      textarea {
+        max-width: $max-input-width;
       }
     }
   }
@@ -204,6 +205,10 @@
   }
 }
 
-.form-container__half {
+.form-container {
-  max-width: 46rem;
+  margin-bottom: $action-footer-height + $large-spacing;
+
+  &--narrow {
+    max-width: $max-input-width;
+  }
 }

styles/core/_util.scss

@@ -98,7 +98,3 @@ hr {
 .usa-section {
   padding: 0;
 }
-
-.form {
-  margin-bottom: $action-footer-height + $large-spacing;
-}

styles/core/_variables.scss

@@ -21,6 +21,7 @@ $home-pg-icon-width: 6rem;
 $large-spacing: 4rem;
 $max-page-width: $max-panel-width + $sidenav-expanded-width + $large-spacing;
 $action-footer-height: 6rem;
+$max-input-width: 46rem;
 
 /*
  * USWDS Variables

styles/elements/_inputs.scss

@@ -58,7 +58,7 @@
 
 .usa-input {
   margin: ($gap * 2) 0;
-  max-width: 75rem;
+  max-width: $max-input-width;
 
   &-label-helper {
     font-size: $small-font-size;
@@ -111,8 +111,7 @@
     @include h5;
 
     font-weight: normal;
-
+    max-width: $max-input-width;
-    @include line-max;
 
     .icon-link {
       padding: 0 ($gap / 2);

templates/applications/new/step_1.html

@@ -22,7 +22,7 @@
   {% include "fragments/flash.html" %}
 
   <base-form inline-template :enable-save="true">
-    <form method="POST" action="{{ action }}" v-on:submit="handleSubmit" class="form">
+    <form method="POST" action="{{ action }}" v-on:submit="handleSubmit" class="form-container">
       {{ form.csrf_token }}
       <div class="form-row">
         <div class="form-col">

templates/applications/new/step_2.html

@@ -21,7 +21,7 @@
   </p>
   <hr>
   <application-environments inline-template v-bind:initial-data='{{ form.data|tojson }}'>
-    <form method="POST" action="{{ url_for('applications.update_new_application_step_2', portfolio_id=portfolio.id, application_id=application.id) }}" v-on:submit="handleSubmit" class="form">
+    <form method="POST" action="{{ url_for('applications.update_new_application_step_2', portfolio_id=portfolio.id, application_id=application.id) }}" v-on:submit="handleSubmit" class="form-container">
       <div class="subheading">{{ 'portfolios.applications.environments_heading' | translate }}</div>
       <div class="panel">
         <div class="panel__content">

templates/applications/settings.html

@@ -20,7 +20,7 @@
 
   {% if user_can(permissions.EDIT_APPLICATION) %}
     <base-form inline-template>
-      <form method="POST" action="{{ url_for('applications.update', application_id=application.id) }}" class="col col--half">
+      <form method="POST" action="{{ url_for('applications.update', application_id=application.id) }}" class="form-container--narrow">
         {{ application_form.csrf_token }}
         {{ TextInput(application_form.name, validation="applicationName", optional=False) }}
         {{ TextInput(application_form.description, validation="defaultTextAreaField", paragraph=True, optional=True, showOptional=False) }}

templates/portfolios/admin.html

@@ -13,7 +13,7 @@
   <div v-cloak class="portfolio-admin">
     {% include "fragments/flash.html" %}
     <!-- max width of this section is 460px -->
-    <section class="form-container__half">
+    <section class="form-container--narrow">
       <h3>Portfolio name and component</h3>
       {% if user_can(permissions.EDIT_PORTFOLIO_NAME) %}
         <base-form inline-template>

templates/portfolios/new/step_1.html

@@ -19,7 +19,7 @@
   {{ StickyCTA(text="portfolios.new.cta_step_1"|translate, context=("portfolios.new.sticky_header_context"|translate({"step": "1"}) )) }}
   <base-form inline-template>
     <div class="row">
-      <form id="portfolio-create" class="col form" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
+      <form id="portfolio-create" class="col form-container" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
         {{ form.csrf_token }}
         <div class="form-row form-row--bordered">
           <div class="form-col">

templates/task_orders/builder_base.html

@@ -28,7 +28,7 @@
 
       {% include "fragments/flash.html" %}
 
-      <div class="task-order form">
+      <div class="task-order form-container">
         {% block to_builder_form_field %}{% endblock %}
       </div>
       <div