Harmonise the typography when listing uploads

24px with 19px is what we use on the uploads page. On notifications page
we use 19px with 16px.

There’s some loose idea that the bigger size is for items that contain
other items.

This also increases the line height for recipients of PDF letters to
make things line up.

app/assets/stylesheets/components/letter.scss

@@ -89,3 +89,8 @@ $iso-paper-ratio: 141.42135624%;
   }
 
 }
+
+.letter-recipient-summary {
+  line-height: 28px;
+  margin-bottom: 0;
+}

app/assets/stylesheets/views/dashboard.scss

@@ -83,6 +83,17 @@
     max-width: 580px;
   }
 
+  &-hint-large {
+    @include core-19;
+    display: block;
+    color: $secondary-text-colour;
+    pointer-events: none;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 580px;
+  }
+
 }
 
 .failure-highlight {

app/templates/views/dashboard/_jobs.html

@@ -26,19 +26,19 @@
           <a class="file-list-filename-large govuk-link govuk-link--no-visited-state" href="{{ url_for('.view_job', service_id=current_service.id, job_id=item.id) }}">{{ item.original_file_name }}</a>
         {% endif %}
         {% if item.scheduled %}
-          <span class="file-list-hint">
+          <span class="file-list-hint-large">
             Sending {{
               item.scheduled_for|format_datetime_relative
             }}
           </span>
         {% elif item.upload_type == 'contact_list' %}
-          <span class="file-list-hint">
+          <span class="file-list-hint-large">
             Uploaded {{
               item.created_at|format_datetime_relative
             }}
           </span>
         {% else %}
-          <span class="file-list-hint">
+          <span class="file-list-hint-large">
             Sent {{
               (item.scheduled_for or item.created_at)|format_datetime_relative
             }}
@@ -78,7 +78,7 @@
           ))
         ) }}
       {% elif item.pdf_letter %}
-        <p class="govuk-body govuk-!-margin-bottom-1">
+        <p class="govuk-body letter-recipient-summary">
           {% for line in item.recipient.splitlines() %}
             {% if loop.index < 3 %}
               {{ line }}<br>

app/templates/views/send-contact-list.html

@@ -47,7 +47,7 @@
         {% call row_heading() %}
           <div class="file-list">
             <a class="file-list-filename-large govuk-link govuk-link--no-visited-state" href="{{ url_for('main.send_from_contact_list', service_id=current_service.id, template_id=template.id, contact_list_id=item.id) }}">{{ item.original_file_name }}</a>
-            <span class="file-list-hint">
+            <span class="file-list-hint-large">
               Uploaded {{ item.created_at|format_datetime_relative }}
             </span>
           </div>

tests/app/main/views/test_send.py

@@ -3920,7 +3920,7 @@ def test_choose_from_contact_list(
         template_id=template['id'],
         contact_list_id=expected_list_id,
     )
-    assert normalize_spaces(page.select_one('.file-list-hint').text) == (
+    assert normalize_spaces(page.select_one('.file-list-hint-large').text) == (
         expected_time
     )
     assert normalize_spaces(page.select_one('.big-number-smallest').text) == (

tests/app/main/views/test_uploads.py

@@ -128,7 +128,7 @@ def test_get_upload_hub_page(
         '123 Example Street'
     )
     assert normalize_spaces(str(uploads[1].select_one('.govuk-body'))) == (
-        '<p class="govuk-body govuk-!-margin-bottom-1"> '
+        '<p class="govuk-body letter-recipient-summary"> '
         'Firstname Lastname<br/> '
         '123 Example Street<br/> '
         '</p>'