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 8150b61371
commit 6dd8d74ee9
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> <RouterLink to="/sources" class="text-accent hover:underline ml-1">View all sources →</RouterLink>
</div> </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">
<table class="w-full text-sm min-w-[480px]"> <div class="overflow-x-auto">
<table class="w-full text-sm min-w-[560px]">
<caption class="sr-only">Source health — last 24 hours</caption> <caption class="sr-only">Source health — last 24 hours</caption>
<thead class="bg-surface-raised border-b border-surface-border"> <thead class="bg-surface-raised border-b border-surface-border">
<tr> <tr>
@ -111,6 +112,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
</div> </div>

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

@ -20,7 +20,8 @@
No incidents tagged yet. No incidents tagged yet.
</div> </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]"> <table class="w-full text-sm min-w-[600px]">
<thead class="bg-surface-raised border-b border-surface-border"> <thead class="bg-surface-raised border-b border-surface-border">
<tr> <tr>
@ -62,6 +63,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
<!-- Incident detail drawer --> <!-- Incident detail drawer -->

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> <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>
<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]"> <table class="w-full text-sm min-w-[480px]">
<thead class="bg-surface-raised border-b border-surface-border"> <thead class="bg-surface-raised border-b border-surface-border">
<tr> <tr>
@ -41,6 +42,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
</div> </div>
</template> </template>