From 9f2ae5464a4132a51accf9f27ad2cb804a2ccbc0 Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Sat, 16 May 2026 09:11:42 -0700
Subject: [PATCH] fix(ui): nested overflow wrapper to prevent overflow-hidden
 clipping table columns

overflow-hidden and overflow-x-auto on the same element conflict in Tailwind's
CSS generation order. The shorthand overflow:hidden can override overflow-x:auto,
clipping the rightmost column (diagnose buttons). Fix: outer div keeps
overflow-hidden for rounded corners, inner div handles overflow-x-auto scrolling.
---
 web/src/views/DashboardView.vue | 6 ++++--
 web/src/views/IncidentsView.vue | 4 +++-
 web/src/views/SourcesView.vue   | 4 +++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/src/views/DashboardView.vue b/web/src/views/DashboardView.vue
index 2a57604..8ca5720 100644
--- a/web/src/views/DashboardView.vue
+++ b/web/src/views/DashboardView.vue
@@ -65,8 +65,9 @@
         <RouterLink to="/sources" class="text-accent hover:underline ml-1">View all sources →</RouterLink>
       </div>
 
-      <div v-else class="rounded border border-surface-border overflow-hidden overflow-x-auto">
-        <table class="w-full text-sm min-w-[480px]">
+      <div v-else class="rounded border border-surface-border overflow-hidden">
+        <div class="overflow-x-auto">
+        <table class="w-full text-sm min-w-[560px]">
           <caption class="sr-only">Source health — last 24 hours</caption>
           <thead class="bg-surface-raised border-b border-surface-border">
             <tr>
@@ -111,6 +112,7 @@
             </tr>
           </tbody>
         </table>
+        </div>
       </div>
     </div>
 
diff --git a/web/src/views/IncidentsView.vue b/web/src/views/IncidentsView.vue
index bd42276..fd4bc8b 100644
--- a/web/src/views/IncidentsView.vue
+++ b/web/src/views/IncidentsView.vue
@@ -20,7 +20,8 @@
       No incidents tagged yet.
     </div>
 
-    <div v-else class="rounded border border-surface-border overflow-hidden overflow-x-auto">
+    <div v-else class="rounded border border-surface-border overflow-hidden">
+      <div class="overflow-x-auto">
       <table class="w-full text-sm min-w-[600px]">
         <thead class="bg-surface-raised border-b border-surface-border">
           <tr>
@@ -62,6 +63,7 @@
           </tr>
         </tbody>
       </table>
+      </div>
     </div>
 
     <!-- Incident detail drawer -->
diff --git a/web/src/views/SourcesView.vue b/web/src/views/SourcesView.vue
index 4e41325..190eeea 100644
--- a/web/src/views/SourcesView.vue
+++ b/web/src/views/SourcesView.vue
@@ -12,7 +12,8 @@
       <p class="text-sm">Run the ingest pipeline: <code class="bg-surface-raised px-1 rounded">python scripts/ingest_corpus.py</code></p>
     </div>
 
-    <div v-else class="rounded border border-surface-border overflow-hidden overflow-x-auto">
+    <div v-else class="rounded border border-surface-border overflow-hidden">
+      <div class="overflow-x-auto">
       <table class="w-full text-sm min-w-[480px]">
         <thead class="bg-surface-raised border-b border-surface-border">
           <tr>
@@ -41,6 +42,7 @@
           </tr>
         </tbody>
       </table>
+      </div>
     </div>
   </div>
 </template>