Updates to table wrappers across the application

Grid update to dashboard
Small style updates

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

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

app/templates/partials/jobs/notifications.html

@@ -22,7 +22,7 @@
   {% else %}
 
     {% if notifications %}
-      <div class="dashboard-table bottom-gutter-3-2">
+      <div class="dashboard-table overflow-x-auto">
     {% endif %}
       {% if job.still_processing %}
         <p class="bottom-gutter hint">

app/templates/partials/notifications/notifications.html

@@ -1,8 +1,8 @@
 {% 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 table-wrapper" aria-labelledby='pill-selected-item'>
-  <div class="dashboard-table bottom-gutter-3-2">
+<div class="ajax-block-container" aria-labelledby='pill-selected-item'>
+  <div class="dashboard-table overflow-x-auto">
 
   {% call(item, row_number) list_table(
     [notification],

app/templates/views/activity/notifications.html

@@ -5,7 +5,7 @@
 <div class="ajax-block-container" id='pill-selected-item'>
 
   {% if notifications %}
-  <div class="table-wrapper">
+  <div class="overflow-x-auto">
     <div class='dashboard-table'>
   {% endif %}
     {% call(item, row_number) list_table(

app/templates/views/api/callbacks.html

@@ -14,8 +14,8 @@
 
 {% block maincolumn_content %}
   {{ page_header('Callbacks') }}
-	<div class="table-wrapper">
-		<div class="bottom-gutter-3-2 dashboard-table body-copy-table">
+	<div class="overflow-x-auto">
+		<div class="bottom-gutter-3-2 dashboard-table body-copy-table overflow-x-auto">
 				{% call mapping_table(
 				caption='General',
 				field_headings=['Label', 'Value', 'Action'],

app/templates/views/check/preview.html

@@ -41,7 +41,7 @@
       </li>
     </ul>
   </div>
-  <div class="usa-table-container--scrollable" tabindex="0">
+  <div class="usa-table-container--scrollable overflow-x-auto" tabindex="0">
     <table class="usa-table usa-table--borderless width-full">
       <caption class="font-body-lg table-heading">
         Note: Only the first 5 rows are displayed here.

app/templates/views/dashboard/_jobs.html

@@ -1,6 +1,6 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
 
-<div class="table-wrapper">
+<div class="overflow-x-auto">
   <div class='dashboard-table ajax-block-container'>
     {% call(item, row_number) list_table(
       jobs,

app/templates/views/dashboard/all-template-statistics.html

@@ -28,7 +28,7 @@
           No messages sent
         </p>
       {% else %}
-        <div class='template-statistics-table'>
+        <div class='template-statistics-table overflow-x-auto'>
           {% call(item, row_number) list_table(
             month.templates_used,
             caption=month.name,

app/templates/views/dashboard/dashboard.html

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

app/templates/views/dashboard/template-statistics.html

@@ -2,7 +2,7 @@
 
 <div class="ajax-block-container">
   {% if template_statistics|length > 1 %}
-    <div class='template-statistics-table'>
+    <div class='template-statistics-table overflow-x-auto'>
       {% call(item, row_number) list_table(
         template_statistics,
         caption="Messages sent by template",

app/templates/views/inbound-sms-admin.html

@@ -23,36 +23,34 @@ Inbound SMS
   <h1 class="font-body-2xl">
     Inbound SMS
   </h1>
-
-  <table class="usa-table usa-table--borderless inbound">
-          <thread>
-              <tr>
-                <th>{{table_headings.field_headings[0]}}</th>
-                <th>{{table_headings.field_headings[1]}}</th>
-                <th>{{table_headings.field_headings[2]}}</th>
-              </tr>
-          </thread>
-          <tbody>
-
-          {% for value in inbound_num_list.data: %}
+  <div class="overflow-x-auto">
+    <table class="usa-table usa-table--borderless inbound width-full">
+      <thead>
           <tr>
-              <td>{{value.number}}</td>
-              <td>
-
-              {% if value.active %}
-                Active
-              {% elif not value.service.name  %}
-                  Not used
-              {% else %}
-                Inactive
-              {% endif %}
-              </td>
-              <td>
-                  <a href="{{ url_for('main.service_dashboard', service_id=value.service.id) }}" class="usa-link bold">{{ value.service.name }}</a>
-              </td>
+            <th>{{table_headings.field_headings[0]}}</th>
+            <th>{{table_headings.field_headings[1]}}</th>
+            <th>{{table_headings.field_headings[2]}}</th>
           </tr>
-          {% endfor %}
-          </tbody>
-  </table>
-
+      </thead>
+      <tbody>
+      {% for value in inbound_num_list.data: %}
+      <tr>
+          <td>{{value.number}}</td>
+          <td>
+          {% if value.active %}
+            Active
+          {% elif not value.service.name  %}
+              Not used
+          {% else %}
+            Inactive
+          {% endif %}
+          </td>
+          <td>
+              <a href="{{ url_for('main.service_dashboard', service_id=value.service.id) }}" class="usa-link bold">{{ value.service.name }}</a>
+          </td>
+      </tr>
+      {% endfor %}
+      </tbody>
+    </table>
+  </div>
 {% endblock %}

app/templates/views/message-status.html

@@ -49,7 +49,7 @@
   <p>Notify cannot tell you if your users open an email or click on the links in an email. We do not track open rates and click-throughs because there are privacy issues. Tracking emails without asking permission from users could breach General Data Protection Regulations (GDPR).</p> -->
 
   <h2 id="text-message-statuses" class="heading-medium">Text messages</h2>
-  <div class="margin-bottom-8">
+  <div class="margin-bottom-8 overflow-x-auto">
     {% call mapping_table(
       caption='Message statuses – text messages',
       field_headings=['Status', 'Description'],

app/templates/views/performance.html

@@ -44,33 +44,31 @@
     </div>
   </div>
 
-  <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 %}
+  <div class="dashboard-table overflow-x-auto">
+    {% 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 %}
-      <p class="table-show-more-link">
-        Only showing the last {{ notifications_by_type|length }} days
-      </p>
-    </div>
+      {% 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>
   </div>
 
   <h2 class="govuk-heading-m">
@@ -84,7 +82,7 @@
       ) }}
     </div>
   </div>
-  <div class="table-wrapper">
+  <div class="overflow-x-auto">
     <div class="dashboard-table">
       {% call(item, row_number) list_table(
         processing_time | reverse,
@@ -124,7 +122,7 @@
       <span class="usa-sr-only">using Notify.</span>
     </div>
   </div>
-  <div class="table-wrapper">
+  <div class="overflow-x-auto">
     <div class="dashboard-table">
       {% call(item, row_number) list_table(
         organizations_using_notify,

app/templates/views/platform-admin/_base_template.html

@@ -16,7 +16,7 @@
       </ol>
     </nav>
     <div class="grid-row margin-bottom-10">
-      <div class="tablet:grid-col-3 margin-top-4">
+      <div class="tablet:grid-col-2 margin-top-4">
         <nav class="navigation">
           <ul class="usa-sidenav">
 
@@ -41,7 +41,7 @@
           </ul>
         </nav>
       </div>
-      <div class="grid-col-9 tablet:grid-col-9 padding-left-4 sub-content">
+      <div class="grid-col-10 tablet:grid-col-10 padding-left-4 sub-content">
       {% block backLink %}{% endblock %}
         <main id="main-content" role="main">
           {% block content %}

app/templates/views/platform-admin/complaints.html

@@ -13,26 +13,26 @@
     Email complaints
   </h1>
 
+  <div class="overflow-x-auto">
+    {% call(item, row_number) list_table(
+        complaints,
+        caption="Complaints",
+        caption_visible=False,
+        empty_message='No complaints',
+        field_headings=['Notification Id', 'Service', 'Complaint type', 'Complaint Date'],
+        field_headings_visible=True
+    ) %}
 
-  {% call(item, row_number) list_table(
-      complaints,
-      caption="Complaints",
-      caption_visible=False,
-      empty_message='No complaints',
-      field_headings=['Notification Id', 'Service', 'Complaint type', 'Complaint Date'],
-      field_headings_visible=True
-  ) %}
+        {{ link_field(item.notification_id, url_for('main.view_notification', service_id=item.service_id, notification_id=item.notification_id)) }}
 
-      {{ link_field(item.notification_id, url_for('main.view_notification', service_id=item.service_id, notification_id=item.notification_id)) }}
+        {{ link_field(item.service_name, url_for('main.service_dashboard', service_id=item.service_id)) }}
 
-      {{ link_field(item.service_name, url_for('main.service_dashboard', service_id=item.service_id)) }}
+        {{ text_field(item.complaint_type) }}
 
-      {{ text_field(item.complaint_type) }}
-
-      {{ text_field(item.complaint_date|format_datetime_table if item.complaint_date else None) }}
-
-  {% endcall %}
+        {{ text_field(item.complaint_date|format_datetime_table if item.complaint_date else None) }}
 
+    {% endcall %}
+  </div>
   {{ previous_next_navigation(prev_page, next_page) }}
 
 {% endblock %}

app/templates/views/platform-admin/services.html

@@ -7,6 +7,7 @@
 {% from "components/components/details/macro.njk" import usaDetails %}
 
 {% macro services_table(services, caption) %}
+<div class="overflow-x-auto">
   {% call(item, row_number) mapping_table(
     caption=caption,
     caption_visible=False,
@@ -48,6 +49,7 @@
     {% endfor %}
 
   {% endcall %}
+</div>
 {% endmacro %}
 
 

app/templates/views/pricing/index.html

@@ -35,7 +35,7 @@ part.</p>
 
 <h4>Calculation of message parts without special characters</h4>
 
-<div class="bottom-gutter-3-2">
+<div class="overflow-x-auto">
   {% call mapping_table(
   caption='Text message pricing',
   field_headings=['Message length', 'Charge'],
@@ -86,7 +86,7 @@ recipient’s preferred language, but we are aware that, rarely, a phone carrier
 to be calculated as detailed below.<p>
 <h4>Calculation of message parts with special characters or non-romanized scripts</h4>
   {% set accentedChars %}
-<div class="bottom-gutter-3-2">
+<div class="overflow-x-auto">
   {% call mapping_table(
   caption='Accented characters that affect text message charges',
   field_headings=['Character', 'Description'],
@@ -151,7 +151,7 @@ to be calculated as detailed below.<p>
 "html": accentedChars
 }) }}
 
-<div class="bottom-gutter-3-2">
+<div class="overflow-x-auto">
   {% call mapping_table(
   caption='Pricing for text messages containing accented characters that affect the charges',
   field_headings=['Message length', 'Charge'],

app/templates/views/service-settings.html

@@ -16,7 +16,7 @@
 
     <h1 class="font-body-lg">Settings</h1>
 
-    <div class="bottom-gutter-3-2 settings-table body-copy-table">
+    <div class="bottom-gutter-3-2 settings-table body-copy-table overflow-x-auto">
 
       {% call mapping_table(
         caption='General',

app/templates/views/signedout.html

@@ -20,7 +20,7 @@ Notify.gov
             <div class="desktop:grid-col-7 tablet:grid-col-12">
               <h1 class="font-serif-2xl usa-hero__heading">Reach people where they are with government-powered text messages</h1>
               <p class="font-sans-lg">Notify.gov is a text message service that helps federal, state, local, tribal and territorial governments more effectively communicate with the people they serve.</p>
-              <div class="usa-button-group margin-bottom-5">
+              <div class="usa-button-group margin-bottom-5 flex-align-center">
                 <a class="usa-button usa-button login-button login-button--primary margin-right-2" href="{{ initial_signin_url }}">Sign in with <img src="{{ asset_url('images/logo-login.svg') }}" alt="Login.gov logo">
                 </a>
                 if you are an existing pilot partner

app/templates/views/usage.html

@@ -70,7 +70,7 @@
       </div> #}
 
       {% if months %}
-      <div class="table-wrapper">
+      <div class="overflow-x-auto">
         <div class="dashboard-table usage-table body-copy-table margin-top-4">
           {% call(item, row_index) list_table(
             months,

app/templates/withnav_template.html

@@ -30,7 +30,7 @@
       {% block orgNavBreadcrumb %}{% include "/new/components/org_nav_breadcrumb.html" %}{% endblock %}
     {% endif %}
     <div class="grid-row margin-top-5">
-      <div class="tablet:grid-col-3">
+      <div class="tablet:grid-col-2">
         {% block sideNavigation %}
           {% if current_org.name %}
             {% include "/new/components/org_nav.html" %}
@@ -44,7 +44,7 @@
           #}
         {% endblock %}
       </div>
-      <div class="tablet:grid-col-9 tablet:padding-left-4">
+      <div class="tablet:grid-col-10 tablet:padding-left-4">
         {% block beforeContent %}
           {% block backLink %}{% endblock %}
         {% endblock %}