From 67ce135b46562acf226e826d6d4088c568a1637e Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Mon, 6 Apr 2026 22:36:23 +0700
Subject: [PATCH] feat: enhance job detail UI with improved overflow handling
 and layout adjustments. Update card components to manage overflow and ensure
 better readability of job reports and details, enhancing the overall user
 experience.

---
 .../operations/OperationsJobsTab.svelte       | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/web/src/lib/components/operations/OperationsJobsTab.svelte b/web/src/lib/components/operations/OperationsJobsTab.svelte
index 4826349..cc37cb9 100644
--- a/web/src/lib/components/operations/OperationsJobsTab.svelte
+++ b/web/src/lib/components/operations/OperationsJobsTab.svelte
@@ -64,7 +64,7 @@
 
 	<CardContent class="space-y-3 p-3 sm:p-4">
 		{#each jobs as job (job.job_id)}
-			<div class="bg-card min-w-0 rounded-lg border">
+			<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">
 					<div class="flex min-w-0 flex-wrap items-start justify-between gap-2">
 						<div class="min-w-0 flex items-center gap-2">
@@ -129,7 +129,7 @@
 					{@const logEntries = getJobLogEntries(detailedJob)}
 					{@const logTotal = getJobLogTotal(detailedJob, logEntries)}
 					<div class="border-t bg-muted/10 p-3 sm:p-4">
-						<div class="space-y-3">
+						<div class="max-h-[70vh] space-y-3 overflow-y-auto pr-1">
 							{#if isDetailsLoading}
 								<p class="text-muted-foreground text-xs">Догружаем свежие детали задачи…</p>
 							{/if}
@@ -209,20 +209,20 @@
 											{/if}
 										</div>
 									</div>
-									<div class="grid gap-2 md:grid-cols-2 xl:grid-cols-4">
-										<div class="rounded-md border bg-muted/40 p-2.5">
+									<div class="grid min-w-0 gap-2 md:grid-cols-2 xl:grid-cols-4">
+										<div class="min-w-0 overflow-hidden rounded-md border bg-muted/40 p-2.5">
 											<p class="text-muted-foreground text-[11px] uppercase">Агрегация</p>
 											<p class="text-sm font-semibold">{jobReport.aggregationTotal} префиксов</p>
 										</div>
-										<div class="rounded-md border bg-muted/40 p-2.5">
+										<div class="min-w-0 overflow-hidden rounded-md border bg-muted/40 p-2.5">
 											<p class="text-muted-foreground text-[11px] uppercase">Домены</p>
 											<p class="text-sm font-semibold">{jobReport.domains.length}</p>
 										</div>
-										<div class="rounded-md border bg-muted/40 p-2.5">
+										<div class="min-w-0 overflow-hidden rounded-md border bg-muted/40 p-2.5">
 											<p class="text-muted-foreground text-[11px] uppercase">ASN</p>
 											<p class="text-sm font-semibold">{jobReport.asn.length}</p>
 										</div>
-										<div class="rounded-md border bg-muted/40 p-2.5">
+										<div class="min-w-0 overflow-hidden rounded-md border bg-muted/40 p-2.5">
 											<p class="text-muted-foreground text-[11px] uppercase">CDN/IP Range</p>
 											<p class="text-sm font-semibold">{jobReport.cdn.length}/{jobReport.ipRanges.length}</p>
 										</div>
@@ -238,8 +238,8 @@
 										</div>
 									{/if}
 
-									<div class="grid gap-3 xl:grid-cols-2">
-										<div class="space-y-1.5 rounded-lg border p-3">
+									<div class="grid min-w-0 gap-3 xl:grid-cols-2">
+										<div class="min-w-0 overflow-hidden space-y-1.5 rounded-lg border p-3">
 											<p class="text-sm font-medium">Домены: какой домен какие IP/префиксы вернул</p>
 											<ScrollArea class="max-h-44 rounded border bg-muted/25 p-2">
 												{#each jobReport.domains as row (`${job.job_id}-domain-${row.source}`)}
@@ -253,7 +253,7 @@
 												{/each}
 											</ScrollArea>
 										</div>
-										<div class="space-y-1.5 rounded-lg border p-3">
+										<div class="min-w-0 overflow-hidden space-y-1.5 rounded-lg border p-3">
 											<p class="text-sm font-medium">ASN: сколько префиксов получено по AS</p>
 											<ScrollArea class="max-h-44 rounded border bg-muted/25 p-2">
 												{#each jobReport.asn as row (`${job.job_id}-asn-${row.asn}`)}
@@ -266,7 +266,7 @@
 												{/each}
 											</ScrollArea>
 										</div>
-										<div class="space-y-1.5 rounded-lg border p-3">
+										<div class="min-w-0 overflow-hidden space-y-1.5 rounded-lg border p-3">
 											<p class="text-sm font-medium">CDN: из каждой ссылки полученные IP/префиксы</p>
 											<ScrollArea class="max-h-44 rounded border bg-muted/25 p-2">
 												{#each jobReport.cdn as row (`${job.job_id}-cdn-${row.source}`)}
@@ -280,7 +280,7 @@
 												{/each}
 											</ScrollArea>
 										</div>
-										<div class="space-y-1.5 rounded-lg border p-3">
+										<div class="min-w-0 overflow-hidden space-y-1.5 rounded-lg border p-3">
 											<p class="text-sm font-medium">IP range: итог по статическим диапазонам</p>
 											<ScrollArea class="max-h-44 rounded border bg-muted/25 p-2">
 												{#each jobReport.ipRanges as row (`${job.job_id}-ipr-${row.source}`)}