From 362c52ce8b5e040e7162e6af8b42e0c3e252d296 Mon Sep 17 00:00:00 2001
From: Beverly Nguyen <Beverly.Nguyen@gsa.gov>
Date: Tue, 21 Oct 2025 15:37:43 -0700
Subject: [PATCH] table-overflow-x-auto

---
 .../organizations/organization/index.html     | 70 ++++++++++---------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/app/templates/views/organizations/organization/index.html b/app/templates/views/organizations/organization/index.html
index e0485d413..600405b7b 100644
--- a/app/templates/views/organizations/organization/index.html
+++ b/app/templates/views/organizations/organization/index.html
@@ -79,42 +79,44 @@
 
   <div class="margin-bottom-5">
     <h2 class="font-heading-lg margin-bottom-2">Services Overview</h2>
-    <table class="usa-table">
-      <thead>
-        <tr>
-          <th scope="col" role="columnheader">Name</th>
-          <th scope="col" role="columnheader">Status</th>
-          <th scope="col" role="columnheader">Usage</th>
-          <th scope="col" role="columnheader">Primary Contact</th>
-          <th scope="col" role="columnheader">Recent Template Used</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% if services %}
-          {% for service in services %}
+    <div class="table-overflow-x-auto">
+      <table class="usa-table">
+        <thead>
           <tr>
-            <td><a href="{{ url_for('main.service_dashboard', service_id=service.id) }}" class="usa-link">{{ service.name }}</a></td>
-            <td>
-              {% if not service.active %}
-                Suspended
-              {% elif service.restricted %}
-                Trial
-              {% else %}
-                Live
-              {% endif %}
-            </td>
-            <td>{{ service.usage|default('N/A') }}</td>
-            <td>{{ service.primary_contact|default('N/A') }}</td>
-            <td>{{ service.recent_template|default('N/A') }}</td>
+            <th scope="col" role="columnheader">Name</th>
+            <th scope="col" role="columnheader">Status</th>
+            <th scope="col" role="columnheader">Usage</th>
+            <th scope="col" role="columnheader">Primary Contact</th>
+            <th scope="col" role="columnheader">Recent Template Used</th>
           </tr>
-          {% endfor %}
-        {% else %}
-          <tr>
-            <td colspan="5" class="table-empty-message">No services found within this organization</td>
-          </tr>
-        {% endif %}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {% if services %}
+            {% for service in services %}
+            <tr>
+              <td><a href="{{ url_for('main.service_dashboard', service_id=service.id) }}" class="usa-link">{{ service.name }}</a></td>
+              <td>
+                {% if not service.active %}
+                  Suspended
+                {% elif service.restricted %}
+                  Trial
+                {% else %}
+                  Live
+                {% endif %}
+              </td>
+              <td>{{ service.usage|default('N/A') }}</td>
+              <td>{{ service.primary_contact|default('N/A') }}</td>
+              <td>{{ service.recent_template|default('N/A') }}</td>
+            </tr>
+            {% endfor %}
+          {% else %}
+            <tr>
+              <td colspan="5" class="table-empty-message">No services found within this organization</td>
+            </tr>
+          {% endif %}
+        </tbody>
+      </table>
+    </div>
   </div>
 
 {% endblock %}