added small text. Added top margin. Use textarea to allow wrap text on digest

src/registrar/assets/src/sass/_theme/_base.scss

@@ -299,3 +299,4 @@ Fit-content itself does not work.
 .minh-143px {
   min-height: 143px;
 }
+

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;
+}

src/registrar/forms/domain.py

@@ -661,9 +661,8 @@ class DomainDsdataForm(forms.Form):
         },
         widget=forms.Textarea(
             attrs={
-                "class": "text-wrap",
+                "maxlength": "40",
-                "rows": "2",
+                "class": "text-wrap usa-textarea--digest",
-                "style": "height: fit-content; resize: none; overflow:hidden;"
             }
         )
     )

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 %}

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 %}

src/registrar/templates/includes/input_with_errors.html

@@ -7,8 +7,8 @@ error messages, if necessary.
 
 {% load widget_tweaks %}
 
-{% if widget.attrs.maxlength %}
+{% if widget.attrs.maxlength or field.widget_type == 'textarea' %}
-<div class="usa-character-count">
+  <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 %}
+{% if field.widget_type == 'textarea' or widget.attrs.maxlength %}
-  <span
+    {% if not do_not_show_max_chars %}
-    id="{{ widget.attrs.id }}__message"
+        <span
-    class="usa-character-count__message"
+          id="{{ widget.attrs.id }}__message"
-    aria-live="polite"
+          class="usa-character-count__message"
-  >
+          aria-live="polite"
-    You can enter up to {{ widget.attrs.maxlength }} characters
+        >
-  </span>
+          You can enter up to {{ widget.attrs.maxlength }} characters
-
+        </span>
-</div>
+    {% endif %}
+  </div>
 {% endif %}