From 2938e48a653f98e381673e8c6667aa6195bcfea4 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Tue, 27 Aug 2019 17:16:39 -0400
Subject: [PATCH] Set max width on p elements and add in p tags where they were
 missing

---
 styles/core/_util.scss                          | 4 ++++
 templates/components/alert.html                 | 4 +++-
 templates/components/checkbox_input.html        | 4 +++-
 templates/components/date_picker.html           | 4 +++-
 templates/components/multi_checkbox_input.html  | 4 +++-
 templates/components/options_input.html         | 4 +++-
 templates/components/selector.html              | 4 +++-
 templates/components/text_input.html            | 4 +++-
 templates/components/totals_box.html            | 4 ++--
 templates/components/upload_input.html          | 4 +++-
 templates/portfolios/applications/index.html    | 4 +++-
 templates/portfolios/applications/settings.html | 8 ++++++--
 templates/task_orders/form_header.html          | 4 +++-
 13 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/styles/core/_util.scss b/styles/core/_util.scss
index cbcf8e8a..6237bc56 100644
--- a/styles/core/_util.scss
+++ b/styles/core/_util.scss
@@ -76,3 +76,7 @@
 .user-permission {
   font-weight: $font-normal;
 }
+
+p {
+  max-width: 80ch;
+}
diff --git a/templates/components/alert.html b/templates/components/alert.html
index 5691d1a8..8406a3da 100644
--- a/templates/components/alert.html
+++ b/templates/components/alert.html
@@ -31,7 +31,9 @@
       {% endif %}
 
       {% if message %}
-        <div class='usa-alert-text'>{{ message | safe }}</div>
+        <p class='usa-alert-text'>
+          {{ message | safe }}
+        </p>
       {% endif %}
 
       {% if caller %}
diff --git a/templates/components/checkbox_input.html b/templates/components/checkbox_input.html
index 157c0409..e573c4cd 100644
--- a/templates/components/checkbox_input.html
+++ b/templates/components/checkbox_input.html
@@ -18,7 +18,9 @@
             {{ label | safe }}
 
             {% if field.description %}
-            <span class='usa-input__help'>{{ field.description | safe }}</span>
+              <p class='usa-input__help'>
+                {{ field.description | safe }}
+              </p>
             {% endif %}
           </legend>
         </fieldset>
diff --git a/templates/components/date_picker.html b/templates/components/date_picker.html
index 61c1889f..316eea2b 100644
--- a/templates/components/date_picker.html
+++ b/templates/components/date_picker.html
@@ -27,7 +27,9 @@
         </div>
 
         {% if description %}
-          <span class='usa-input__help'>{{ description | safe }}</span>
+          <p class='usa-input__help'>
+            {{ description | safe }}
+          </p>
         {% endif %}
       </legend>
 
diff --git a/templates/components/multi_checkbox_input.html b/templates/components/multi_checkbox_input.html
index 90184a15..41fb23c3 100644
--- a/templates/components/multi_checkbox_input.html
+++ b/templates/components/multi_checkbox_input.html
@@ -31,7 +31,9 @@
           </div>
 
           {% if field.description %}
-            <span class='usa-input__help'>{{ field.description | safe }}</span>
+            <p class='usa-input__help'>
+              {{ field.description | safe }}
+            </p>
             {{ validation_icons }}
           {% endif %}
         </legend>
diff --git a/templates/components/options_input.html b/templates/components/options_input.html
index b7d8d858..8dd6de8b 100644
--- a/templates/components/options_input.html
+++ b/templates/components/options_input.html
@@ -24,7 +24,9 @@
             </div>
 
             {% if field.description %}
-              <span class='usa-input__help'>{{ field.description | safe }}</span>
+              <p class='usa-input__help'>
+                {{ field.description | safe }}
+              </p>
             {% endif %}
 
             {% if show_validation %}
diff --git a/templates/components/selector.html b/templates/components/selector.html
index e6c9318c..1b0181a3 100644
--- a/templates/components/selector.html
+++ b/templates/components/selector.html
@@ -16,7 +16,9 @@
         <div class="usa-input__title">{{ field.label | striptags }}</div>
 
         {% if field.description %}
-          <span class='usa-input__help'>{{ field.description | safe }}</span>
+          <p class='usa-input__help'>
+            {{ field.description | safe }}
+          </p>
         {% endif %}
 
         <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
diff --git a/templates/components/text_input.html b/templates/components/text_input.html
index 51528970..368706e9 100644
--- a/templates/components/text_input.html
+++ b/templates/components/text_input.html
@@ -48,7 +48,9 @@
           </div>
 
           {% if field.description %}
-            <span class='usa-input__help'>{{ description | safe }}</span>
+            <p class='usa-input__help'>
+              {{ description | safe }}
+            </p>
           {% endif %}
 
           {% if not disabled %}
diff --git a/templates/components/totals_box.html b/templates/components/totals_box.html
index 2766a447..5ad39166 100644
--- a/templates/components/totals_box.html
+++ b/templates/components/totals_box.html
@@ -8,13 +8,13 @@
 
     <div class="h4">{{ 'components.totals_box.obligated_funds' | translate }}</div>
     <div class="h3">{{ obligated_funds | dollars }}</div>
-    <div>{{ 'components.totals_box.obligated_text' | translate }}</div>
+    <p>{{ 'components.totals_box.obligated_text' | translate }}</p>
 
     <hr>
 
     <div class="h4">{{ 'components.totals_box.total_amount' | translate }}</div>
     <div class="h3">{{ contract_amount | dollars }}</div>
-    <div>{{ 'components.totals_box.total_text' | translate }}</div>
+    <p>{{ 'components.totals_box.total_text' | translate }}</p>
 
   </div>
 
diff --git a/templates/components/upload_input.html b/templates/components/upload_input.html
index c2cc176d..41234b00 100644
--- a/templates/components/upload_input.html
+++ b/templates/components/upload_input.html
@@ -23,7 +23,9 @@
       {% if show_label %}
         {{ field.label }}
       {% endif %}
-      {{ field.description }}
+      <p>
+        {{ field.description }}
+      </p>
       <div v-if="!hideInput" class="upload-widget">
         <label class="upload-label" for="{{ field.name }}">
           <span class="upload-button">
diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html
index aa8740b7..778cc40b 100644
--- a/templates/portfolios/applications/index.html
+++ b/templates/portfolios/applications/index.html
@@ -43,7 +43,9 @@
             <header class='accordion__header row'>
               <div class='col col-grow'>
                 <h3 class='icon-link accordion__title' v-on:click="toggleSection('{{ section_name }}')">{{ application.name }}</h3>
-                <span class='accordion__description'>{{ application.description }}</span>
+                <p class='accordion__description'>
+                  {{ application.description }}
+                </p>
                 <div class='accordion__actions'>
                   <a class='icon-link' href='{{ url_for("applications.settings", application_id=application.id) }}'>
                     <span>{{ "portfolios.applications.app_settings_text" | translate }}</span>
diff --git a/templates/portfolios/applications/settings.html b/templates/portfolios/applications/settings.html
index 4e7f0047..c3f21059 100644
--- a/templates/portfolios/applications/settings.html
+++ b/templates/portfolios/applications/settings.html
@@ -62,7 +62,9 @@
             <div class="usa-input usa-input__title__view-only">
               {{ application_form.name.label() }}
             </div>
-            {{ application_form.name.data }}
+            <p>
+              {{ application_form.name.data }}
+            </p>
           </div>
         </div>
         <div class="form-row">
@@ -70,7 +72,9 @@
             <div class="usa-input usa-input__title__view-only">
               {{ application_form.description.label() }}
             </div>
-            {{ application_form.description.data }}
+            <p>
+              {{ application_form.description.data }}
+            </p>
           </div>
         </div>
       </div>
diff --git a/templates/task_orders/form_header.html b/templates/task_orders/form_header.html
index a5081b96..749a5d30 100644
--- a/templates/task_orders/form_header.html
+++ b/templates/task_orders/form_header.html
@@ -13,7 +13,9 @@
       </div>
     </div>
     <div class="form-row">
-      {{ description }}
+      <p>
+        {{ description }}
+      </p>
     </div>
   </div>
 {% endmacro %}