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.

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}

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>
 

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>

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>

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>