From f02f95d132286762e003df6a43a366cee923d889 Mon Sep 17 00:00:00 2001
From: CocoByte <nicolle.leclair@gmail.com>
Date: Thu, 13 Mar 2025 00:46:34 -0600
Subject: [PATCH] added small text.  Added top margin.  Use textarea to allow
 wrap text on digest

---
 .../assets/src/sass/_theme/_base.scss         |  1 +
 .../assets/src/sass/_theme/_tables.scss       |  7 +++++
 src/registrar/forms/domain.py                 |  5 ++--
 src/registrar/templates/domain_dsdata.html    | 10 +++----
 .../includes/finish_profile_form.html         |  2 +-
 .../templates/includes/input_with_errors.html | 27 ++++++++++---------
 6 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/registrar/assets/src/sass/_theme/_base.scss b/src/registrar/assets/src/sass/_theme/_base.scss
index 6a0dec2ab..37c429ae9 100644
--- a/src/registrar/assets/src/sass/_theme/_base.scss
+++ b/src/registrar/assets/src/sass/_theme/_base.scss
@@ -299,3 +299,4 @@ Fit-content itself does not work.
 .minh-143px {
   min-height: 143px;
 }
+
diff --git a/src/registrar/assets/src/sass/_theme/_tables.scss b/src/registrar/assets/src/sass/_theme/_tables.scss
index 509bdc573..7c3dc0513 100644
--- a/src/registrar/assets/src/sass/_theme/_tables.scss
+++ b/src/registrar/assets/src/sass/_theme/_tables.scss
@@ -166,3 +166,10 @@ th {
       overflow-y: visible;
   }
 }
+
+.usa-textarea--digest {
+  max-height: 4rem;
+  min-width: 13rem;
+  resize: none;
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/src/registrar/forms/domain.py b/src/registrar/forms/domain.py
index 02c4225ee..0f200198e 100644
--- a/src/registrar/forms/domain.py
+++ b/src/registrar/forms/domain.py
@@ -661,9 +661,8 @@ class DomainDsdataForm(forms.Form):
         },
         widget=forms.Textarea(
             attrs={
-                "class": "text-wrap",
-                "rows": "2",
-                "style": "height: fit-content; resize: none; overflow:hidden;"
+                "maxlength": "40",
+                "class": "text-wrap usa-textarea--digest",
             }
         )
     )
diff --git a/src/registrar/templates/domain_dsdata.html b/src/registrar/templates/domain_dsdata.html
index 83642cf66..4d5be7866 100644
--- a/src/registrar/templates/domain_dsdata.html
+++ b/src/registrar/templates/domain_dsdata.html
@@ -123,7 +123,7 @@
         {% endif %}
       {% endfor %}
 
-      <div tabindex="0" id="domains__table-wrapper">
+      <div class="margin-top-4" tabindex="0" id="domains__table-wrapper">
         <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked" id="dsdata-table">
           <thead>
             <tr>
@@ -214,24 +214,24 @@
                 <tr class="edit-row display-none">
                   <td class="text-bottom">
                     {% with sublabel_text="Numbers (0-9) only." %}
-                      {% with attr_required=True add_initial_value_attr=True add_group_class="usa-form-group--unstyled-error" %}
+                      {% with attr_required=True add_initial_value_attr=True add_group_class="usa-form-group--unstyled-error" use_small_sublabel_text=True %}
                         {% input_with_errors form.key_tag %}
                       {% endwith %}
                     {% endwith %}
                   </td>
                   <td class="text-bottom">
-                    {% with attr_required=True add_initial_value_attr=True add_group_class="usa-form-group--unstyled-error" %}
+                    {% with attr_required=True add_initial_value_attr=True add_group_class="usa-form-group--unstyled-error" use_small_sublabel_text=True %}
                         {% input_with_errors form.algorithm %}
                       {% endwith %}
                   </td>
                   <td class="text-bottom">
-                    {% with attr_required=True add_initial_value_attr=True add_group_class="usa-form-group--unstyled-error" %}
+                    {% with attr_required=True add_initial_value_attr=True add_group_class="usa-form-group--unstyled-error" use_small_sublabel_text=True %}
                         {% input_with_errors form.digest_type %}
                       {% endwith %}
                   </td>
                   <td class="text-bottom">
                     {% with sublabel_text="Numbers (0-9) and letters (a-f) only. SHA-1: 40 chars, SHA-256: 64 chars." %}
-                      {% with attr_required=True add_initial_value_attr=True add_group_class="usa-form-group--unstyled-error" %}
+                      {% with attr_required=True add_initial_value_attr=True add_group_class="usa-form-group--unstyled-error" use_small_sublabel_text=True %}
                         {% input_with_errors form.digest %}
                       {% endwith %}
                     {% endwith %}
diff --git a/src/registrar/templates/includes/finish_profile_form.html b/src/registrar/templates/includes/finish_profile_form.html
index 119862269..83020acae 100644
--- a/src/registrar/templates/includes/finish_profile_form.html
+++ b/src/registrar/templates/includes/finish_profile_form.html
@@ -62,7 +62,7 @@
 
             {% with link_href=login_help_url %}
                 {% with sublabel_text="We recommend using a Login.gov account that's only connected to your work email address. If you need to change your email, you'll need to make a change to your Login.gov account. Get help with updating your email address." %}
-                    {% with link_text="Get help with updating your email address" target_blank=True do_not_show_max_chars=True %}
+                    {% with link_text="Get help with updating your email address" target_blank=True %}
                         {% input_with_errors form.email %}
                     {% endwith %}
                 {% endwith %}
diff --git a/src/registrar/templates/includes/input_with_errors.html b/src/registrar/templates/includes/input_with_errors.html
index 80768e2b8..8361a0560 100644
--- a/src/registrar/templates/includes/input_with_errors.html
+++ b/src/registrar/templates/includes/input_with_errors.html
@@ -7,8 +7,8 @@ error messages, if necessary.
 
 {% load widget_tweaks %}
 
-{% if widget.attrs.maxlength %}
-<div class="usa-character-count">
+{% if widget.attrs.maxlength or field.widget_type == 'textarea' %}
+  <div class="usa-character-count">
 {% endif %}
 
 {% if field.use_fieldset %}
@@ -35,7 +35,7 @@ error messages, if necessary.
   {% endif %}
 
   {% if sublabel_text %}
-    <p id="{{ widget.attrs.id }}__sublabel" class="text-base margin-top-2px margin-bottom-1">
+    <p id="{{ widget.attrs.id }}__sublabel" class="{% if use_small_sublabel_text %}font-body-xs {% endif %}text-base margin-top-2px margin-bottom-1">
       {# If the link_text appears more than once, the first instance will be a link and the other instances will be ignored #}
       {% if link_text and link_text in sublabel_text %}
         {% with link_index=sublabel_text|find_index:link_text %}
@@ -92,14 +92,15 @@ error messages, if necessary.
   </div>
 {% endif %}
 
-{% if widget.attrs.maxlength and not do_not_show_max_chars %}
-  <span
-    id="{{ widget.attrs.id }}__message"
-    class="usa-character-count__message"
-    aria-live="polite"
-  >
-    You can enter up to {{ widget.attrs.maxlength }} characters
-  </span>
-
-</div>
+{% if field.widget_type == 'textarea' or widget.attrs.maxlength %}
+    {% if not do_not_show_max_chars %}
+        <span
+          id="{{ widget.attrs.id }}__message"
+          class="usa-character-count__message"
+          aria-live="polite"
+        >
+          You can enter up to {{ widget.attrs.maxlength }} characters
+        </span>
+    {% endif %}
+  </div>
 {% endif %}