Better handling for users entering long names (#4590)

<!--
Thanks for contributing to Hypha!

Please ensure your contributions pass all necessary linting/testing and
that the appropriate documentation has been updated.
-->

<!--
Describe briefly what your pull request changes. If this is resolving an
issue, please specify below via "Fixes #<Github Issue ID>"
-->
Fixes #4589. This adds a global max character limit to the `full_name`
field, working both in the application form and the account settings.
There's a few other fixes also bundled in this:
- Better handling for displaying long names in application details,
submission all (table & list views), etc
- In account view, the slack max input field not showing character count
 - Added translation to a few strings


## Test Steps
<!-- 
If step does not require manual testing, skip/remove this section.

Give a brief overview of the steps required for a user/dev to test this
contribution. Important things to include:
 - Required user roles for where necessary (ie. "As a Staff Admin...")
- Clear & validatable expected results (ie. "Confirm the submit button
is now not clickable")
- Language that can be understood by non-technical testers if being
tested by users
-->

 - [ ] Set `FORCE_LOGIN_FOR_APPLICATION = False`
- [ ] Ensure when submitting an application and not logged in, you
cannot submit a name longer than 255 chars
- [ ] Ensure character count updates on typing for both name & slack
fields in the account view

Author: wes-otf

hypha/apply/funds/blocks.py

@@ -7,6 +7,7 @@
 from hypha.addressfield.fields import ADDRESS_FIELDS_ORDER, AddressField
 from hypha.apply.categories.blocks import CategoryQuestionBlock
 from hypha.apply.stream_forms.blocks import FormFieldsBlock
+from hypha.apply.users.models import User
 from hypha.apply.utils.blocks import (
     CustomFormFieldsBlock,
     MustIncludeFieldBlock,
@@ -27,7 +28,6 @@ class ApplicationMustIncludeFieldBlock(MustIncludeFieldBlock):
 class TitleBlock(ApplicationMustIncludeFieldBlock):
     name = "title"
     description = "The title of the project"
-    widget = forms.TextInput()
     field_label = blocks.CharBlock(
         label=_("Label"), default=_("What is the title of your application?")
     )
@@ -132,6 +132,12 @@ class FullNameBlock(ApplicationMustIncludeFieldBlock):
         ),
     )
 
+    def get_field_kwargs(self, struct_value):
+        kwargs = super().get_field_kwargs(struct_value)
+        # Pull the max length from the full_name db field
+        kwargs["max_length"] = User._meta.get_field("full_name").max_length
+        return kwargs
+
     class Meta:
         label = _("Full name")
         icon = "user"

hypha/apply/funds/templates/funds/applicationsubmission_detail.html

@@ -94,7 +94,7 @@ <h5>{% blocktrans with stage=object.previous.stage %}Your {{ stage }} applicatio
                                 <relative-time datetime={{ object.submit_time|date:"c" }} class="font-semibold">
                                     {{ object.submit_time|date:"SHORT_DATETIME_FORMAT" }}
                                 </relative-time>
-                                {% trans "by" %} <strong class="font-semibold">{% display_submission_author %}</strong>
+                                {% trans "by" %} <strong class="max-w-md font-semibold line-clamp-2">{% display_submission_author %}</strong>
                             </span>
 
                             <span class="self-center">
@@ -103,7 +103,7 @@ <h5>{% blocktrans with stage=object.previous.stage %}Your {{ stage }} applicatio
                                     {{ object.live_revision.timestamp|date:"SHORT_DATETIME_FORMAT" }}
                                 </relative-time>
                                 {% trans "by" %}
-                                <strong class="font-semibold">
+                                <strong class="max-w-md font-semibold line-clamp-2">
                                     {% display_submission_author True %}
                                 </strong>)
                             </span>
@@ -121,7 +121,6 @@ <h5>{% blocktrans with stage=object.previous.stage %}Your {{ stage }} applicatio
                                     {% trans "Edit" %}
                                 </a>
                             {% endif %}
-
                             {% can "delete_submission" object as can_delete_submission %}
                             {% if can_delete_submission %}
                                 <a

hypha/apply/funds/templates/funds/includes/submission-list-row.html

@@ -72,14 +72,14 @@
         <div class="pt-1">
             <p class="m-0 text-xs">
                 #{{ s.application_id }}
-                submitted <relative-time datetime="{{ s.submit_time|date:"c" }}">{{ s.submit_time|date:"SHORT_DATE_FORMAT" }}</relative-time>
-                {% if s|show_applicant_identity:request.user %}by <a
+                {% trans "submitted" %} <relative-time datetime="{{ s.submit_time|date:"c" }}">{{ s.submit_time|date:"SHORT_DATE_FORMAT" }}</relative-time>
+                {% if s|show_applicant_identity:request.user %}{% trans "by" %} <a
                     href="{% url "apply:submissions:list" %}{% modify_query "only_query_string" "page" applicants=s.user.id %}"
                     hx-get="{% url "apply:submissions:list" %}{% modify_query "only_query_string" "page" applicants=s.user.id %}"
                     hx-target="#main"
                     hx-push-url="true"
                     hx-swap="outerHTML transition:true"
-                    class="link link-muted text-inherit"
+                    class="inline-flex max-w-sm link link-muted text-inherit text-inherit truncate"
                 >{{ s.user }}</a>{% endif %} • {{ s.stage }} •
 
 
@@ -135,17 +135,17 @@
                 <div
                     data-tippy-content="Assigned to {{ s.lead }}"
                     data-tippy-placement="left"
-                    class="flex gap-1 truncate"
+                    class="flex gap-1"
                 >
                     {% comment %} <span class="block mb-1 text-xs text-fg-muted">Lead: </span> {% endcomment %}
-                    {% heroicon_micro "user-circle" aria_hidden="true" size=16 class="fill-fg-muted" %}
+                    {% heroicon_micro "user-circle" aria_hidden="true" size=16 class="fill-fg-muted min-w-[16px]" %}
                     <a
                         hx-get="{% url "apply:submissions:list" %}{% modify_query "only_query_string" "page" leads=s.lead.id %}"
                         href="{% url "apply:submissions:list" %}{% modify_query "only_query_string" "page" leads=s.lead.id %}"
                         hx-target="#main"
                         hx-push-url="true"
                         hx-swap="outerHTML transition:true"
-                        class="link link-muted text-inherit"
+                        class="max-w-sm link link-muted text-inherit truncate"
                     >
                         {{ s.lead }}
                     </a>

hypha/apply/funds/templates/funds/includes/submission-table-row.html

@@ -74,7 +74,7 @@
                 hx-target="#main"
                 hx-push-url="true"
                 hx-swap="outerHTML transition:true"
-                class="link link-muted text-inherit"
+                class="max-w-lg text-center link link-muted text-inherit line-clamp-2"
             >
                 {{ s.user }}
             </a>
@@ -122,7 +122,7 @@
                 hx-target="#main"
                 hx-push-url="true"
                 hx-swap="outerHTML transition:true"
-                class="link link-muted text-inherit"
+                class="max-w-lg text-center link link-muted text-inherit line-clamp-2"
             >{{ s.lead }}</a>
         </td>
     {% endif %}

hypha/apply/funds/templates/submissions/partials/submission-lead.html

@@ -7,7 +7,7 @@
         hx-get="{% url 'funds:submissions:lead_update' pk=submission.pk %}"
         hx-target="#htmx-modal"
     >
-        {% trans "Lead" %}: {{ submission.lead }}
+        <div class="inline-flex max-w-lg"><span class="truncate">{% trans "Lead" %}: {{ submission.lead }}</span></div>
         {% heroicon_micro "pencil-square" class="inline ms-1" aria_hidden=true %}
     </a>
 {% elif request.user.is_org_faculty or not HIDE_STAFF_IDENTITY %}