When resizing the viewport for the header, I noticed other responsive issues and addressed them here

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -355,7 +355,7 @@ td.table-empty-message {
          background-image: url(../img/material-icons/description.svg);
       }
    }
-   .job-table, .dashboard-table {
+   .table-wrapper {
       overflow-x: scroll;
    }
 }

app/templates/content_template.html

@@ -11,10 +11,10 @@
   <div class="grid-row">
 
     {% if navigation_links %}
-      <div class="tablet:grid-col-2">
+      <div class="tablet:grid-col-2 margin-bottom-4">
         {{ sub_navigation(navigation_links) }}
       </div>
-      <div class="tablet:grid-col-10 padding-left-4 usa-prose site-prose">
+      <div class="tablet:grid-col-10 tablet:padding-left-4 usa-prose site-prose">
     {% else %}
       <div class="tablet:grid-col-10">
     {% endif %}

app/templates/main_nav.html

@@ -1,7 +1,7 @@
 {% if help %}
   {% include 'partials/tour.html' %}
 {% else %}
-<nav class="nav">
+<nav class="nav margin-bottom-4">
   <a class="usa-button margin-top-1 margin-bottom-5 width-full"
     href="{{ url_for('.choose_template', service_id=current_service.id) }}">Send messages</a>
   <ul class="usa-sidenav">

app/templates/partials/notifications/notifications.html

@@ -1,7 +1,7 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading, notification_status_field %}
 {% from "components/page-footer.html" import page_footer %}
 
-<div class="ajax-block-container" aria-labelledby='pill-selected-item'>
+<div class="ajax-block-container table-wrapper" aria-labelledby='pill-selected-item'>
   <div class="dashboard-table bottom-gutter-3-2">
 
   {% call(item, row_number) list_table(

app/templates/settings_template.html

@@ -8,16 +8,16 @@
   <div class="grid-container">
     <div class="grid-row margin-top-5">
       {% if help %}
-        <div class="grid-col-3">
+        <div class="tablet:grid-col-3">
       {% else %}
-        <div class="grid-col-3">
+        <div class="tablet:grid-col-3 margin-bottom-4">
       {% endif %}
           {% include "settings_nav.html" %}
         </div>
       {% if help %}
-        <div class="grid-col-8">
+        <div class="tablet:grid-col-8">
       {% else %}
-        <div class="grid-col-9 padding-left-4">
+        <div class="tablet:grid-col-9 tablet:padding-left-4">
       {% endif %}
         {% block beforeContent %}
           {% block backLink %}{% endblock %}

app/templates/views/activity/notifications.html

@@ -5,6 +5,7 @@
 <div class="ajax-block-container" id='pill-selected-item'>
 
   {% if notifications %}
+  <div class="table-wrapper">
     <div class='dashboard-table'>
   {% endif %}
     {% call(item, row_number) list_table(
@@ -29,6 +30,7 @@
     {% endcall %}
   {% if notifications %}
     </div>
+  </div>
   {% endif %}
 
   {% if show_pagination %}

app/templates/views/api/callbacks.html

@@ -14,24 +14,26 @@
 
 {% block maincolumn_content %}
   {{ page_header('Callbacks') }}
-  <div class="bottom-gutter-3-2 dashboard-table body-copy-table">
-		{% call mapping_table(
-	    caption='General',
-	    field_headings=['Label', 'Value', 'Action'],
-	    field_headings_visible=False,
-	    caption_visible=False
-	  ) %}
-	    {% call row() %}
-	      {{ text_field('Delivery receipts') }}
-	      {{ optional_text_field(delivery_status_callback, truncate=true) }}
-	      {{ edit_field('Change', url_for('.delivery_status_callback', service_id=current_service.id)) }}
-	    {% endcall %}
+	<div class="table-wrapper">
+		<div class="bottom-gutter-3-2 dashboard-table body-copy-table">
+				{% call mapping_table(
+				caption='General',
+				field_headings=['Label', 'Value', 'Action'],
+				field_headings_visible=False,
+				caption_visible=False
+			) %}
+				{% call row() %}
+				{{ text_field('Delivery receipts') }}
+				{{ optional_text_field(delivery_status_callback, truncate=true) }}
+				{{ edit_field('Change', url_for('.delivery_status_callback', service_id=current_service.id)) }}
+				{% endcall %}
 
-	    {% call row() %}
-	      {{ text_field('Received text messages') }}
-          {{ optional_text_field(received_text_messages_callback, truncate=true) }}
-	   	  {{ edit_field('Change', url_for('.received_text_messages_callback', service_id=current_service.id)) }}
-	    {% endcall %}
-	  {% endcall %}
+				{% call row() %}
+				{{ text_field('Received text messages') }}
+				{{ optional_text_field(received_text_messages_callback, truncate=true) }}
+				{{ edit_field('Change', url_for('.received_text_messages_callback', service_id=current_service.id)) }}
+				{% endcall %}
+			{% endcall %}
+		</div>
 	</div>
 {% endblock %}

app/templates/views/dashboard/_jobs.html

@@ -1,115 +1,117 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
 
-<div class='dashboard-table ajax-block-container'>
-  {% call(item, row_number) list_table(
-    jobs,
-    caption="Recent files uploaded",
-    caption_visible=False,
-    empty_message=(
-      'You have not uploaded any files yet.'
-    ),
-    field_headings=[
-      'File',
-      'Status'
-    ],
-    field_headings_visible=False
-  ) %}
-    {% call row_heading() %}
-      <div class="file-list">
-        <a class="file-list-filename-large usa-link" href="{{ url_for('.view_job', service_id=current_service.id, job_id=item.id) }}">{{ item.original_file_name }}</a>
-        {% if item.scheduled %}
-          <span class="file-list-hint-large">
-            Sending {{
-              item.scheduled_for|format_datetime_relative
-            }}
-          </span>
-        {% else %}
-          <span class="file-list-hint-large">
-            Sent {{
-              (item.scheduled_for or item.created_at)|format_datetime_relative
-            }}
-          </span>
-        {% endif %}
-
-      </div>
-    {% endcall %}
-    {% call field() %}
-      {% if item.scheduled %}
-        {% if link %}
-          <a class="usa-link display-flex" href="{{ link }}">
-        {% endif %}
-            <span class="big-number-smallest">
-              <span class="big-number-number">
-                {% if item.notification_count is number %}
-                  {% if currency %}
-                    {{ "{}{:,.2f}".format(currency, item.notification_count) }}
-                  {% else %}
-                    {{ "{:,}".format(item.notification_count) }}
-                  {% endif %}
-                {% else %}
-                  {{ item.notification_count }}
-                {% endif %}
-              </span>
-              {% if item.notification_count %}
-                <span class="big-number-label">{{ item.notification_count|message_count_label(item.template_type,suffix='waiting to send') }}</span>
-              {% endif %}
+<div class="table-wrapper">
+  <div class='dashboard-table ajax-block-container'>
+    {% call(item, row_number) list_table(
+      jobs,
+      caption="Recent files uploaded",
+      caption_visible=False,
+      empty_message=(
+        'You have not uploaded any files yet.'
+      ),
+      field_headings=[
+        'File',
+        'Status'
+      ],
+      field_headings_visible=False
+    ) %}
+      {% call row_heading() %}
+        <div class="file-list">
+          <a class="file-list-filename-large usa-link" href="{{ url_for('.view_job', service_id=current_service.id, job_id=item.id) }}">{{ item.original_file_name }}</a>
+          {% if item.scheduled %}
+            <span class="file-list-hint-large">
+              Sending {{
+                item.scheduled_for|format_datetime_relative
+              }}
             </span>
-        {% if link %}
-          </a>
-        {% endif %}
-      {% else %}
-        <div class="grid-row">
-          <div class="grid-col-4">
-            {% if link %}
-              <a class="usa-link display-flex" href="{{ link }}">
-            {% endif %}
+          {% else %}
+            <span class="file-list-hint-large">
+              Sent {{
+                (item.scheduled_for or item.created_at)|format_datetime_relative
+              }}
+            </span>
+          {% endif %}
+
+        </div>
+      {% endcall %}
+      {% call field() %}
+        {% if item.scheduled %}
+          {% if link %}
+            <a class="usa-link display-flex" href="{{ link }}">
+          {% endif %}
               <span class="big-number-smallest">
                 <span class="big-number-number">
-                  {{ "{:,}".format(item.notifications_sending) }}
-                </span>
-                <span class="big-number-label">pending</span>
-              </span>
-            {% if link %}
-              </a>
-            {% endif %}
-          </div>
-          <div class="grid-col-4">
-          <span class="big-number-smallest">
-            <span class="big-number-number">
-              {% if item.notifications_delivered is number %}
-                {{ "{:,}".format(item.notifications_delivered) }}
-              {% else %}
-                {{ item.notifications_delivered }}
-              {% endif %}
-            </span>
-            <span class="big-number-label">delivered</span>
-          </span>
-      </div>
-      <div class="grid-col-4">
-        {% if link %}
-          <a class="usa-link display-flex" href="{{ link }}">
-        {% endif %}
-            <span class="big-number-smallest">
-              <span class="big-number-number">
-                {% if item.notifications_failed is number %}
-                  {% if currency %}
-                    {{ "{}{:,.2f}".format(currency, item.notifications_failed) }}
+                  {% if item.notification_count is number %}
+                    {% if currency %}
+                      {{ "{}{:,.2f}".format(currency, item.notification_count) }}
+                    {% else %}
+                      {{ "{:,}".format(item.notification_count) }}
+                    {% endif %}
                   {% else %}
-                    {{ "{:,}".format(item.notifications_failed) }}
+                    {{ item.notification_count }}
                   {% endif %}
-                {% else %}
-                  {{ item.notifications_failed }}
+                </span>
+                {% if item.notification_count %}
+                  <span class="big-number-label">{{ item.notification_count|message_count_label(item.template_type,suffix='waiting to send') }}</span>
                 {% endif %}
               </span>
-              <span class="big-number-label">failed</span>
+          {% if link %}
+            </a>
+          {% endif %}
+        {% else %}
+          <div class="grid-row">
+            <div class="grid-col-4">
+              {% if link %}
+                <a class="usa-link display-flex" href="{{ link }}">
+              {% endif %}
+                <span class="big-number-smallest">
+                  <span class="big-number-number">
+                    {{ "{:,}".format(item.notifications_sending) }}
+                  </span>
+                  <span class="big-number-label">pending</span>
+                </span>
+              {% if link %}
+                </a>
+              {% endif %}
+            </div>
+            <div class="grid-col-4">
+            <span class="big-number-smallest">
+              <span class="big-number-number">
+                {% if item.notifications_delivered is number %}
+                  {{ "{:,}".format(item.notifications_delivered) }}
+                {% else %}
+                  {{ item.notifications_delivered }}
+                {% endif %}
+              </span>
+              <span class="big-number-label">delivered</span>
             </span>
-        {% if link %}
-          </a>
+        </div>
+        <div class="grid-col-4">
+          {% if link %}
+            <a class="usa-link display-flex" href="{{ link }}">
+          {% endif %}
+              <span class="big-number-smallest">
+                <span class="big-number-number">
+                  {% if item.notifications_failed is number %}
+                    {% if currency %}
+                      {{ "{}{:,.2f}".format(currency, item.notifications_failed) }}
+                    {% else %}
+                      {{ "{:,}".format(item.notifications_failed) }}
+                    {% endif %}
+                  {% else %}
+                    {{ item.notifications_failed }}
+                  {% endif %}
+                </span>
+                <span class="big-number-label">failed</span>
+              </span>
+          {% if link %}
+            </a>
+          {% endif %}
+
+        </div></div>
+
         {% endif %}
-
-      </div></div>
-
-      {% endif %}
+      {% endcall %}
     {% endcall %}
-  {% endcall %}
+  </div>
 </div>

app/templates/views/dashboard/dashboard.html

@@ -29,7 +29,7 @@
 
     {{ ajax_block(partials, updates_url, 'template-statistics') }}
     <h2 class="margin-top-4 margin-bottom-1">Recent Batches</h2>
-    <div>
+    <div class="table-wrapper">
       <table class="usa-table usa-table--borderless job-table">
         <thead class="table-field-headings">
           <tr>

app/templates/views/performance.html

@@ -44,31 +44,33 @@
     </div>
   </div>
 
-  <div class="dashboard-table">
-    {% call(item, row_number) list_table(
-      notifications_by_type|reverse,
-      caption='Messages sent since May 2023',
-      caption_visible=False,
-      field_headings=[
-        'Date',
-        99|message_count_noun('email')|capitalize,
-        99|message_count_noun('sms')|capitalize,
-      ],
-      empty_message='No data to show'
-    ) %}
-      {% call field() %}
-        {{ item.date | format_date_normal }}
+  <div class="table-wrapper">
+    <div class="dashboard-table">
+      {% call(item, row_number) list_table(
+        notifications_by_type|reverse,
+        caption='Messages sent since May 2023',
+        caption_visible=False,
+        field_headings=[
+          'Date',
+          99|message_count_noun('email')|capitalize,
+          99|message_count_noun('sms')|capitalize,
+        ],
+        empty_message='No data to show'
+      ) %}
+        {% call field() %}
+          {{ item.date | format_date_normal }}
+        {% endcall %}
+        {% call field() %}
+          {{ item.emails|format_thousands }}
+        {% endcall %}
+        {% call field() %}
+          {{ item.sms|format_thousands }}
+        {% endcall %}
       {% endcall %}
-      {% call field() %}
-        {{ item.emails|format_thousands }}
-      {% endcall %}
-      {% call field() %}
-        {{ item.sms|format_thousands }}
-      {% endcall %}
-    {% endcall %}
-    <p class="table-show-more-link">
-      Only showing the last {{ notifications_by_type|length }} days
-    </p>
+      <p class="table-show-more-link">
+        Only showing the last {{ notifications_by_type|length }} days
+      </p>
+    </div>
   </div>
 
   <h2 class="govuk-heading-m">
@@ -82,26 +84,28 @@
       ) }}
     </div>
   </div>
-  <div class="dashboard-table">
-    {% call(item, row_number) list_table(
-      processing_time | reverse,
-      caption='Messages sent within 10 seconds',
-      caption_visible=False,
-      field_headings=[
-        'Date', 'Percentage'
-      ],
-      empty_message='No data to show'
-    ) %}
-      {% call field() %}
-        {{ item.date | format_date_normal }}
+  <div class="table-wrapper">
+    <div class="dashboard-table">
+      {% call(item, row_number) list_table(
+        processing_time | reverse,
+        caption='Messages sent within 10 seconds',
+        caption_visible=False,
+        field_headings=[
+          'Date', 'Percentage'
+        ],
+        empty_message='No data to show'
+      ) %}
+        {% call field() %}
+          {{ item.date | format_date_normal }}
+        {% endcall %}
+        {% call field() %}
+          {{ '{:.2f}%'.format(item.percentage_under_10_seconds) }}
+        {% endcall %}
       {% endcall %}
-      {% call field() %}
-        {{ '{:.2f}%'.format(item.percentage_under_10_seconds) }}
-      {% endcall %}
-    {% endcall %}
-    <p class="table-show-more-link">
-      Only showing the last {{ processing_time|length }} days
-    </p>
+      <p class="table-show-more-link">
+        Only showing the last {{ processing_time|length }} days
+      </p>
+    </div>
   </div>
 
   <h2 class="govuk-heading-m">
@@ -120,23 +124,25 @@
       <span class="usa-sr-only">using Notify.</span>
     </div>
   </div>
-  <div class="dashboard-table">
-    {% call(item, row_number) list_table(
-      organizations_using_notify,
-      caption='Organizations using Notify',
-      caption_visible=False,
-      field_headings=[
-        'Organization', 'Number of live services'
-      ],
-      empty_message='No data to show'
-    ) %}
-      {% call field() %}
-        {{ item.organization_name }}
+  <div class="table-wrapper">
+    <div class="dashboard-table">
+      {% call(item, row_number) list_table(
+        organizations_using_notify,
+        caption='Organizations using Notify',
+        caption_visible=False,
+        field_headings=[
+          'Organization', 'Number of live services'
+        ],
+        empty_message='No data to show'
+      ) %}
+        {% call field() %}
+          {{ item.organization_name }}
+        {% endcall %}
+        {% call field() %}
+          {{ item.count_of_live_services }}
+        {% endcall %}
       {% endcall %}
-      {% call field() %}
-        {{ item.count_of_live_services }}
-      {% endcall %}
-    {% endcall %}
+    </div>
   </div>
 
 {% endblock %}

app/templates/views/usage.html

@@ -73,6 +73,7 @@
       </div> #}
 
       {% if months %}
+      <div class="table-wrapper">
         <div class="dashboard-table usage-table body-copy-table margin-top-4">
           {% call(item, row_index) list_table(
             months,
@@ -129,6 +130,7 @@
 
           {% endcall %}
         </div>
+      </div>
       {% endif %}
     </div>
 

app/templates/withnav_template.html

@@ -9,16 +9,16 @@
     {% include "service_navigation.html" %}
     <div class="grid-row margin-top-5">
       {% if help %}
-        <div class="grid-col-3">
+        <div class="tablet:grid-col-3">
       {% else %}
-        <div class="grid-col-3">
+        <div class="tablet:grid-col-3">
       {% endif %}
           {% include "main_nav.html" %}
         </div>
       {% if help %}
         <div class="grid-col-8">
       {% else %}
-        <div class="grid-col-9 padding-left-4">
+        <div class="tablet:grid-col-9 tablet:padding-left-4">
       {% endif %}
         {% block beforeContent %}
           {% block backLink %}{% endblock %}