From 6a7284245fac0c4d271c99632863b120d143db85 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Mon, 6 Apr 2026 22:52:37 +0700
Subject: [PATCH] feat: enhance UI components with improved styling and layout
 adjustments. Update button sizes, text classes, and overflow handling in
 various components for better readability and user experience across the
 operations page.

---
 .../lib/components/operations/OperationsJobsTab.svelte    | 8 ++++----
 .../components/operations/OperationsQuickActions.svelte   | 8 ++++----
 .../components/operations/OperationsRevisionsTab.svelte   | 2 ++
 web/src/lib/components/ui/table/table-row.svelte          | 2 +-
 web/src/routes/operations/+page.svelte                    | 2 +-
 5 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/components/operations/OperationsJobsTab.svelte b/web/src/lib/components/operations/OperationsJobsTab.svelte
index cc37cb9..2ca1425 100644
--- a/web/src/lib/components/operations/OperationsJobsTab.svelte
+++ b/web/src/lib/components/operations/OperationsJobsTab.svelte
@@ -76,11 +76,11 @@
 								aria-expanded={isJobExpanded(job.job_id)}
 								onclick={() => void onToggleJobExpanded(job)}
 							>
-								<ChevronDown class={cn('size-3.5 transition-transform', isJobExpanded(job.job_id) && 'rotate-180')} />
+								<ChevronDown class={cn('size-4 transition-transform', isJobExpanded(job.job_id) && 'rotate-180')} />
 							</Button>
 							<div class="min-w-0">
 								<p class="font-medium break-words">{job.kind}</p>
-								<p class="text-muted-foreground font-mono text-[11px] break-all">{job.job_id}</p>
+								<p class="text-muted-foreground font-mono text-xs break-all">{job.job_id}</p>
 							</div>
 						</div>
 						<div class="flex items-center gap-1">
@@ -128,8 +128,8 @@
 					{@const jobReport = jobReportsById.get(job.job_id)}
 					{@const logEntries = getJobLogEntries(detailedJob)}
 					{@const logTotal = getJobLogTotal(detailedJob, logEntries)}
-					<div class="border-t bg-muted/10 p-3 sm:p-4">
-						<div class="max-h-[70vh] space-y-3 overflow-y-auto pr-1">
+					<div class="border-t bg-muted/10 p-3 sm:p-4 max-h-[70vh] overflow-y-auto overscroll-contain">
+						<div class="space-y-3 pr-1">
 							{#if isDetailsLoading}
 								<p class="text-muted-foreground text-xs">Догружаем свежие детали задачи…</p>
 							{/if}
diff --git a/web/src/lib/components/operations/OperationsQuickActions.svelte b/web/src/lib/components/operations/OperationsQuickActions.svelte
index 6242e62..e69aad6 100644
--- a/web/src/lib/components/operations/OperationsQuickActions.svelte
+++ b/web/src/lib/components/operations/OperationsQuickActions.svelte
@@ -77,14 +77,14 @@
 						<Badge variant={birdHealthyBadgeVariant(birdStatus.healthy)}>{birdHealthyShortLabel(birdStatus.healthy)}</Badge>
 					{/if}
 				</div>
-				<p class="text-muted-foreground max-w-[56ch] text-sm">
+				<p class="text-foreground/80 max-w-[56ch] text-sm">
 					Локально на хосте API: <code class="bg-muted rounded px-1 text-xs">birdc show protocols</code>. Не заменяет мониторинг спикеров.
 				</p>
 				{#if birdLoading}
-					<p class="text-muted-foreground text-sm">Загрузка…</p>
+					<p class="text-foreground/80 text-sm">Загрузка…</p>
 				{:else if birdStatus}
 					{#if !birdStatus.birdc_configured}
-						<p class="text-muted-foreground text-sm">{birdStatus.message ?? 'birdc не настроен на API.'}</p>
+						<p class="text-foreground/80 text-sm">{birdStatus.message ?? 'birdc не настроен на API.'}</p>
 					{:else if birdStatus.error}
 						<p class="text-destructive text-sm">{birdStatus.error}</p>
 					{:else}
@@ -97,7 +97,7 @@
 						</p>
 					{/if}
 				{:else}
-					<p class="text-muted-foreground text-sm">Статус не загружен</p>
+					<p class="text-foreground/80 text-sm">Статус не загружен</p>
 				{/if}
 			</div>
 
diff --git a/web/src/lib/components/operations/OperationsRevisionsTab.svelte b/web/src/lib/components/operations/OperationsRevisionsTab.svelte
index 5b700f5..8d544bc 100644
--- a/web/src/lib/components/operations/OperationsRevisionsTab.svelte
+++ b/web/src/lib/components/operations/OperationsRevisionsTab.svelte
@@ -39,6 +39,7 @@
 		</Button>
 	</CardHeader>
 	<CardContent class="p-0">
+		<div class="overflow-x-auto [scrollbar-gutter:stable]">
 		<Table>
 			<TableHeader>
 				<TableRow>
@@ -76,5 +77,6 @@
 				{/each}
 			</TableBody>
 		</Table>
+		</div>
 	</CardContent>
 </Card>
diff --git a/web/src/lib/components/ui/table/table-row.svelte b/web/src/lib/components/ui/table/table-row.svelte
index 90b4e2a..5f4f015 100644
--- a/web/src/lib/components/ui/table/table-row.svelte
+++ b/web/src/lib/components/ui/table/table-row.svelte
@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
 </script>
 
-<tr bind:this={ref} data-slot="table-row" class={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)} {...restProps}>
+<tr bind:this={ref} data-slot="table-row" class={cn("hover:bg-muted/70 data-[state=selected]:bg-muted border-b transition-colors", className)} {...restProps}>
 	{@render children?.()}
 </tr>
diff --git a/web/src/routes/operations/+page.svelte b/web/src/routes/operations/+page.svelte
index c5d2ee0..f066bce 100644
--- a/web/src/routes/operations/+page.svelte
+++ b/web/src/routes/operations/+page.svelte
@@ -791,7 +791,7 @@
 			<DialogTitle>Задача: {jobDetail?.kind}</DialogTitle>
 		</DialogHeader>
 		{#if jobDetail}
-			<div class={dialogBodyPanel}>
+			<div class={cn(dialogBodyPanel, 'max-h-[80vh] overflow-y-auto')}>
 				<div class="grid grid-cols-2 gap-x-4 gap-y-1 text-sm">
 					<span class="text-muted-foreground">ID</span><span class="font-mono break-all">{jobDetail.job_id}</span>
 					<span class="text-muted-foreground">Статус</span><span><Badge variant={jobStatusVariant(jobDetail.status)}>{jobDetail.status}</Badge></span>