Change to the table width on overflow to have less wrapping text

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

@@ -327,6 +327,16 @@ td.table-empty-message {
    bottom: 0;
 }
 
+@media (max-width: units('desktop-lg')) {
+   .table-overflow-x-auto {
+      overflow-x: auto;
+      table {
+         min-width: 768px;
+      }
+   }
+}
+
+
 // Dashboard
 
 .dashboard {

app/templates/partials/jobs/notifications.html

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

app/templates/partials/notifications/notifications.html

@@ -2,7 +2,7 @@
 {% from "components/page-footer.html" import page_footer %}
 
 <div class="ajax-block-container" aria-labelledby='pill-selected-item'>
-  <div class="dashboard-table overflow-x-auto">
+  <div class="dashboard-table 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="overflow-x-auto">
+  <div class="table-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="overflow-x-auto">
+	<div class="table-overflow-x-auto">
-		<div class="bottom-gutter-3-2 dashboard-table body-copy-table overflow-x-auto">
+		<div class="bottom-gutter-3-2 dashboard-table body-copy-table 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 overflow-x-auto" tabindex="0">
+  <div class="usa-table-container--scrollable table-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="overflow-x-auto">
+<div class="table-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 overflow-x-auto'>
+        <div class='template-statistics-table 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="overflow-x-auto">
+    <div class="table-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 overflow-x-auto'>
+    <div class='template-statistics-table table-overflow-x-auto'>
       {% call(item, row_number) list_table(
         template_statistics,
         caption="Messages sent by template",

app/templates/views/guidance/index.html

@@ -162,6 +162,7 @@
   location, the flag to receive the content needs to be captured in its own column with a Yes or No (Y/N) flag.</p>
 
   <h3>Example</h3>
+  <div class="table-overflow-x-auto">
     <table class="usa-table">
       <caption class="usa-sr-only">
         Example
@@ -211,6 +212,7 @@
         </tr>
       </tbody>
     </table>
+  </div>
 
   {# Preventing fraud #}
   <h2 class="padding-top-1" id="prevent-fraud">Preventing fraud</h2>

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

@@ -23,7 +23,7 @@ Inbound SMS
   <h1 class="font-body-2xl">
     Inbound SMS
   </h1>
-  <div class="overflow-x-auto">
+  <div class="table-overflow-x-auto">
     <table class="usa-table usa-table--borderless inbound width-full">
       <thead>
           <tr>

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 overflow-x-auto">
+  <div class="margin-bottom-8 table-overflow-x-auto">
     {% call mapping_table(
       caption='Message statuses – text messages',
       field_headings=['Status', 'Description'],

app/templates/views/performance.html

@@ -44,7 +44,7 @@
     </div>
   </div>
 
-  <div class="dashboard-table overflow-x-auto">
+  <div class="dashboard-table table-overflow-x-auto">
     {% call(item, row_number) list_table(
       notifications_by_type|reverse,
       caption='Messages sent since May 2023',
@@ -82,7 +82,7 @@
       ) }}
     </div>
   </div>
-  <div class="overflow-x-auto">
+  <div class="table-overflow-x-auto">
     <div class="dashboard-table">
       {% call(item, row_number) list_table(
         processing_time | reverse,
@@ -122,7 +122,7 @@
       <span class="usa-sr-only">using Notify.</span>
     </div>
   </div>
-  <div class="overflow-x-auto">
+  <div class="table-overflow-x-auto">
     <div class="dashboard-table">
       {% call(item, row_number) list_table(
         organizations_using_notify,

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

@@ -13,7 +13,7 @@
     Email complaints
   </h1>
 
-  <div class="overflow-x-auto">
+  <div class="table-overflow-x-auto">
     {% call(item, row_number) list_table(
         complaints,
         caption="Complaints",

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

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

app/templates/views/pricing/index.html

@@ -35,7 +35,7 @@ part.</p>
 
 <h4>Calculation of message parts without special characters</h4>
 
-<div class="overflow-x-auto">
+<div class="table-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="overflow-x-auto">
+<div class="table-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="overflow-x-auto">
+<div class="table-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 overflow-x-auto">
+    <div class="bottom-gutter-3-2 settings-table body-copy-table table-overflow-x-auto">
 
       {% call mapping_table(
         caption='General',

app/templates/views/usage.html

@@ -70,8 +70,7 @@
       </div> #}
 
       {% if months %}
-      <div class="overflow-x-auto">
+        <div class="dashboard-table usage-table body-copy-table table-overflow-x-auto margin-top-4">
-        <div class="dashboard-table usage-table body-copy-table margin-top-4">
           {% call(item, row_index) list_table(
             months,
             caption="Total spend",
@@ -122,7 +121,6 @@
 
           {% endcall %}
         </div>
-      </div>
       {% endif %}
     </div>