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,6 +14,7 @@
 
 {% block maincolumn_content %}
   {{ page_header('Callbacks') }}
+	<div class="table-wrapper">
 		<div class="bottom-gutter-3-2 dashboard-table body-copy-table">
 				{% call mapping_table(
 				caption='General',
@@ -34,4 +35,5 @@
 				{% endcall %}
 			{% endcall %}
 		</div>
+	</div>
 {% endblock %}

app/templates/views/dashboard/_jobs.html

@@ -1,5 +1,6 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
 
+<div class="table-wrapper">
   <div class='dashboard-table ajax-block-container'>
     {% call(item, row_number) list_table(
       jobs,
@@ -113,3 +114,4 @@
       {% 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,6 +44,7 @@
     </div>
   </div>
 
+  <div class="table-wrapper">
     <div class="dashboard-table">
       {% call(item, row_number) list_table(
         notifications_by_type|reverse,
@@ -70,6 +71,7 @@
         Only showing the last {{ notifications_by_type|length }} days
       </p>
     </div>
+  </div>
 
   <h2 class="govuk-heading-m">
     Messages sent within 10 seconds
@@ -82,6 +84,7 @@
       ) }}
     </div>
   </div>
+  <div class="table-wrapper">
     <div class="dashboard-table">
       {% call(item, row_number) list_table(
         processing_time | reverse,
@@ -103,6 +106,7 @@
         Only showing the last {{ processing_time|length }} days
       </p>
     </div>
+  </div>
 
   <h2 class="govuk-heading-m">
     Organizations using Notify
@@ -120,6 +124,7 @@
       <span class="usa-sr-only">using Notify.</span>
     </div>
   </div>
+  <div class="table-wrapper">
     <div class="dashboard-table">
       {% call(item, row_number) list_table(
         organizations_using_notify,
@@ -138,5 +143,6 @@
         {% 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 %}