softvisor/Infrastruktur-Monitoring-System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix horizontal page overflow caused by wide tables

Browse Source 
Wide tables stretched the whole page because the shell's main is a flex
item without min-width:0 and no table had a scroll container, so the
header and the summary tiles scrolled out of view. Every table now
scrolls inside its own overflow-x-auto container, the sidebar no longer
shrinks, and long CVE ids, versions, targets and image references are
kept on one line or truncated with a title tooltip.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Dennis Nemec
2026-09-03 19:30:03 +02:00
parent 7ac0a16261
commit 7e606cc884
11 changed files with 526 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
frontend/src/pages/UsersPage.vue
View File

@ -86,44 +86,46 @@ async function resetPassword() {
</div>
<p v-if="loading" class="mt-6 text-gray-500">Loading…</p>
<table v-else class="mt-6 w-full text-left text-sm">
<thead class="border-b border-gray-200 text-gray-500">
<tr>
<th class="py-2">Email</th>
<th>Name</th>
<th>Role</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="u in users" :key="u.id" class="border-b border-gray-100">
<td class="py-2">{{ u.email }}</td>
<td>{{ u.display_name }}</td>
<td class="capitalize">{{ u.role }}</td>
<td>
<StatusBadge
:status="u.is_active ? 'ok' : 'error'"
:label="u.is_active ? 'active' : 'inactive'"
/>
</td>
<td class="space-x-3 text-right">
<button
class="text-blue-600 hover:underline"
@click="dialog = { mode: 'edit', user: u }"
>
Edit
</button>
<button
class="text-blue-600 hover:underline"
@click="dialog = { mode: 'password', user: u }"
>
Reset password
</button>
</td>
</tr>
</tbody>
</table>
<div v-else data-testid="users-scroll" class="overflow-x-auto">
<table class="mt-6 w-full text-left text-sm">
<thead class="border-b border-gray-200 text-gray-500">
<tr>
<th class="py-2">Email</th>
<th>Name</th>
<th>Role</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="u in users" :key="u.id" class="border-b border-gray-100">
<td class="py-2">{{ u.email }}</td>
<td>{{ u.display_name }}</td>
<td class="capitalize">{{ u.role }}</td>
<td>
<StatusBadge
:status="u.is_active ? 'ok' : 'error'"
:label="u.is_active ? 'active' : 'inactive'"
/>
</td>
<td class="space-x-3 text-right">
<button
class="text-blue-600 hover:underline"
@click="dialog = { mode: 'edit', user: u }"
>
Edit
</button>
<button
class="text-blue-600 hover:underline"
@click="dialog = { mode: 'password', user: u }"
>
Reset password
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div v-if="dialog" class="fixed inset-0 flex items-center justify-center bg-black/30">
<div class="w-full max-w-md rounded-lg bg-white p-6 shadow-lg" role="dialog">