Circuit-Forge/turnstone
5
0
Fork 0
Code Issues 11 Pull requests 1 Projects Releases 6 Packages Wiki Activity Actions

fix(ui): nested overflow wrapper to prevent overflow-hidden clipping table columns

Browse source 
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.
This commit is contained in:
pyr0ball 2026-05-16 09:11:42 -07:00
parent f5132d5a5c
commit 560eaf706d
3 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web/src/views/DashboardView.vue
View file

@ -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>
@ -113,6 +114,7 @@
</table>
</div>
</div>
</div>
<!-- Recent criticals -->
<div v-if="stats?.recent_criticals?.length">

4
web/src/views/IncidentsView.vue
View file

@ -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>
@ -63,6 +64,7 @@
</tbody>
</table>
</div>
</div>
<!-- Incident detail drawer -->
<div v-if="selected" class="mt-6 rounded border border-accent bg-surface p-5">

4
web/src/views/SourcesView.vue
View file

@ -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>
@ -43,6 +44,7 @@
</table>
</div>
</div>
</div>
</template>
<script setup lang="ts">