Styling for name and description section:

As part of this, the empty placeholder span was removed from the text input macro and the span will now be conditionall rendered if there is an error message

styles/components/_portfolio_layout.scss

@@ -136,7 +136,7 @@
 }
 
 .portfolio-content {
-  margin: 1 * $gap $gap 0 $gap;
+  margin: (4 * $gap) $gap 0 $gap;
 
   .panel {
     @include shadow-panel;
@@ -148,11 +148,6 @@
       padding-bottom: 0;
     }
 
-    .subheading {
-      font-size: 1.4rem;
-      color: $color-gray;
-    }
-
     .responsive-table-wrapper {
       padding-bottom: $gap * 3;
       margin-bottom: 0;

styles/core/_grid.scss

@@ -44,4 +44,8 @@
     flex-grow: 1;
     padding-right: $spacing-small;
   }
+
+  &.col--half {
+    width: 50%;
+  }
 }

templates/applications/settings.html

@@ -19,26 +19,16 @@
 
 {% block application_content %}
 
-  <div class='subheading'>{{ 'portfolios.applications.settings.name_description' | translate }}</div>
+  <h3>{{ 'portfolios.applications.settings.name_description' | translate }}</h3>
 
   {% if user_can(permissions.EDIT_APPLICATION) %}
     <base-form inline-template>
-      <form method="POST" action="{{ url_for('applications.update', application_id=application.id) }}">
-        <div class="panel">
-          <div class="panel__content">
-            {{ application_form.csrf_token }}
-            <div class="form-row">
-              <div class="form-col form-col--two-thirds">
-                {{ TextInput(application_form.name, optional=False) }}
-                {{ TextInput(application_form.description, paragraph=True, optional=True) }}
-              </div>
-            </div>
-          </div>
-          <div class="panel__footer">
-            <div class="action-group">
-              {{ SaveButton('common.save_changes'|translate) }}
-            </div>
-          </div>
+      <form method="POST" action="{{ url_for('applications.update', application_id=application.id) }}" class="col col--half">
+        {{ application_form.csrf_token }}
+        {{ TextInput(application_form.name, optional=False) }}
+        {{ TextInput(application_form.description, paragraph=True, optional=True, showOptional=False) }}
+        <div class="action-group action-group--tight">
+          {{ SaveButton('common.save_changes'|translate) }}
         </div>
       </form>
     </base-form>
@@ -71,6 +61,7 @@
       </div>
     </div>
   {% endif %}
+  <hr>
 
   {{ MemberManagementTemplate(
     application,

templates/components/text_input.html

@@ -15,6 +15,7 @@
   classes='',
   noMaxWidth=False,
   optional=True,
+  showOptional=True,
   showLabel=True,
   watch=False,
   show_validation=True) -%}
@@ -40,7 +41,7 @@
         <label for={{field.name}}>
           <div class="usa-input__title">
             {{ label }}
-            {% if optional %}
+            {% if optional and showOptional %}
               <span class="usa-input-label-helper">(optional)</span>
             {% endif %}
             {% if tooltip and not disabled %}
@@ -108,12 +109,7 @@
       />
 
       {% if show_validation %}
-        <template v-if='showError'>
-          <span class='usa-input__message' v-html='validationError'></span>
-        </template>
-        <template v-else>
-          <span class='usa-input__message'></span>
-        </template>
+        <span v-if='showError' class='usa-input__message' v-html='validationError'></span>
       {% endif %}
 
     </div>

translations.yaml

@@ -127,11 +127,11 @@ footer:
   login: 'Last login:'
 forms:
   application:
-    description_label: Description
+    description_label: Application Description
     environment_names_label: Environment Name
     environment_names_required_validation_message: Provide at least one environment name.
     environment_names_unique_validation_message: Environment names must be unique.
-    name_label: Name
+    name_label: Application Name
   assign_ppoc:
     dod_id: 'Select new primary point of contact:'
   environments:
@@ -371,7 +371,7 @@ portfolios:
     new_application_title: New Application
     settings_heading: Application Settings
     settings:
-      name_description: Name and Description
+      name_description: Application name and description
       team_members: Team Members
     team_settings:
       blank_slate: