From 0ca5542f6b028652a64f92a81f4ab1da146779a3 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Mon, 6 Apr 2026 23:12:17 +0700
Subject: [PATCH] feat: improve UI components with enhanced overflow handling
 and layout adjustments. Update card and table components to manage overflow
 effectively, ensuring better readability and user experience in the
 operations tabs.

---
 web/src/lib/components/operations/OperationsJobsTab.svelte  | 2 +-
 .../lib/components/operations/OperationsRevisionsTab.svelte | 6 +++---
 web/src/routes/operations/+page.svelte                      | 3 +++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/operations/OperationsJobsTab.svelte b/web/src/lib/components/operations/OperationsJobsTab.svelte
index 2ca1425..98f4e7f 100644
--- a/web/src/lib/components/operations/OperationsJobsTab.svelte
+++ b/web/src/lib/components/operations/OperationsJobsTab.svelte
@@ -62,7 +62,7 @@
 		</Button>
 	</CardHeader>
 
-	<CardContent class="space-y-3 p-3 sm:p-4">
+	<CardContent class="space-y-3 p-3 sm:p-4 max-h-[78vh] overflow-y-auto overscroll-contain [scrollbar-gutter:stable]">
 		{#each jobs as job (job.job_id)}
 			<div class="bg-card min-w-0 overflow-hidden rounded-lg border">
 				<div class="flex min-w-0 flex-col gap-3 p-3 sm:p-4">
diff --git a/web/src/lib/components/operations/OperationsRevisionsTab.svelte b/web/src/lib/components/operations/OperationsRevisionsTab.svelte
index 8d544bc..5e3f3e1 100644
--- a/web/src/lib/components/operations/OperationsRevisionsTab.svelte
+++ b/web/src/lib/components/operations/OperationsRevisionsTab.svelte
@@ -38,9 +38,9 @@
 			<RefreshCw class={revLoading ? 'animate-spin' : ''} />
 		</Button>
 	</CardHeader>
-	<CardContent class="p-0">
-		<div class="overflow-x-auto [scrollbar-gutter:stable]">
-		<Table>
+	<CardContent class="min-w-0 p-0">
+		<div class="max-w-full overflow-x-auto overscroll-x-contain [scrollbar-gutter:stable]">
+		<Table class="min-w-[44rem]">
 			<TableHeader>
 				<TableRow>
 					<TableHead>ID</TableHead>
diff --git a/web/src/routes/operations/+page.svelte b/web/src/routes/operations/+page.svelte
index f066bce..365a59f 100644
--- a/web/src/routes/operations/+page.svelte
+++ b/web/src/routes/operations/+page.svelte
@@ -481,6 +481,9 @@
 		if (expandedJobIds.has(jobId)) {
 			expandedJobIds.delete(jobId);
 		} else {
+			// Keep a single expanded row to prevent the whole jobs card
+			// from growing uncontrollably when several heavy reports are open.
+			expandedJobIds.clear();
 			expandedJobIds.add(jobId);
 			await ensureJobDetails(job);
 		}