Update layout and component structure in Svelte pages

- Adjusted the layout of several Svelte components to ensure consistent spacing and alignment, specifically changing `gap-3` to `gap-4` in multiple instances.
- Replaced Card components with DataTableCard in the Mihomo page for improved data presentation.
- Enhanced text formatting for better readability across various pages, ensuring consistent use of class attributes.

web/src/routes/ips/+page.svelte

@@ -516,7 +516,7 @@ $effect(() => {
 	let isDataEmpty = $derived(!loading && totalIpRows === 0 && !err);
 </script>
 
-<div class="mb-6 flex flex-wrap items-end justify-between gap-4">
+<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
 	<div>
 		<h1 class="text-2xl font-semibold tracking-tight">Уникальные IP</h1>
 		<p class="text-sm text-muted-foreground">

web/src/routes/mihomo/+page.svelte

@@ -11,9 +11,11 @@
 	import { formatBytes } from '$lib/format.js';
 	import * as Table from '$lib/components/ui/table/index.js';
 	import * as Card from '$lib/components/ui/card/index.js';
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { Badge } from '$lib/components/ui/badge/index.js';
 	import KpiStatCard from '$lib/components/kpi-stat-card.svelte';
+	import DataTableCard from '$lib/components/data-table/data-table-card.svelte';
 	import DataQueryState from '$lib/components/fleet/data-query-state.svelte';
 	import MihomoProxyGroups from '$lib/components/mihomo/mihomo-proxy-groups.svelte';
 	import { Skeleton } from '$lib/components/ui/skeleton/index.js';
@@ -189,10 +191,10 @@
 	}
 </script>
 
-<div class="mb-6 flex flex-wrap items-center justify-between gap-3">
+<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
 	<div>
 		<h1 class="text-2xl font-semibold tracking-tight">Mihomo (флот)</h1>
-		<p class="text-muted-foreground text-sm">
+		<p class="text-sm text-muted-foreground">
 			Сводка по нодам и управление прокси. Опрос соединений каждые {POLL_MS / 1000} с.
 		</p>
 	</div>
@@ -206,7 +208,7 @@
 
 <DataQueryState {err} showSkeleton={loading} isEmpty={!loading && rows.length === 0 && !err}>
 	{#snippet empty()}
-		<p class="text-muted-foreground text-sm">
+		<p class="text-sm text-muted-foreground">
 			В снимке агрегата нет серверов. Проверьте шлюз и конфигурацию <code class="text-xs">servers</code>.
 		</p>
 	{/snippet}
@@ -255,15 +257,11 @@
 				</KpiStatCard>
 			</div>
 
-			<Card.Root class="border-l-4 border-l-violet-500/40 shadow-sm">
+			<DataTableCard
-				<Card.Header class="pb-2">
+				title="Ноды"
-					<Card.Title class="text-base">Ноды</Card.Title>
+				description="Контроллер и метрики. Ниже — компактные группы прокси (автозагрузка). «Детально» — обзор с графиками."
-					<Card.Description>
+			>
-						Контроллер и метрики. Ниже — компактные группы прокси (автозагрузка). «Детально» — обзор с
+				<ScrollArea class="w-full" orientation="both">
-						графиками.
-					</Card.Description>
-				</Card.Header>
-				<Card.Content class="overflow-x-auto px-2 sm:px-6">
 					<Table.Root>
 						<Table.Header class="sticky top-0 z-10 bg-muted">
 							<Table.Row class="border-b border-border/80 hover:bg-transparent">
@@ -333,8 +331,8 @@
 							{/each}
 						</Table.Body>
 					</Table.Root>
-				</Card.Content>
+				</ScrollArea>
-			</Card.Root>
+			</DataTableCard>
 
 			<div class="mt-8 space-y-3">
 				<div>
@@ -350,8 +348,9 @@
 					{#each rows.filter((r) => r.metaStatus === 'ok') as r (r.alias)}
 						<Card.Root
 							id="mihomo-proxies-{encodeURIComponent(r.alias)}"
-							data-size="sm"
+							size="sm"
-							class="bg-card min-h-0 min-w-0 scroll-mt-20 gap-0 overflow-hidden py-0 shadow-sm ring-1 ring-border/60"
+							density="compact"
+							class="min-h-0 min-w-0 scroll-mt-20 overflow-hidden shadow-sm"
 						>
 							<Card.Header class="border-border/80 border-b px-3 pb-3 pt-3 sm:px-4">
 								<Card.Title class="font-mono text-sm font-semibold leading-none tracking-tight">
@@ -413,7 +412,7 @@
 						</Card.Root>
 					{/each}
 					{#if rows.filter((r) => r.metaStatus === 'ok').length === 0}
-						<p class="text-muted-foreground text-sm">
+						<p class="text-sm text-muted-foreground">
 							Нет нод с настроенным Mihomo — переключать прокси негде. Проверьте конфиг шлюза.
 						</p>
 					{/if}

web/src/routes/servers/[alias]/+page.svelte

@@ -75,7 +75,7 @@
 	let handshakeT = $derived(num(summary?.handshake_timeouts_total));
 </script>
 
-<div class="mb-6 flex flex-wrap items-center justify-between gap-3">
+<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
 	<div>
 		<h1 class="text-2xl font-semibold tracking-tight">Сервер: обзор</h1>
 		<p class="text-sm text-muted-foreground">

web/src/routes/servers/[alias]/mihomo/+page.svelte

@@ -496,10 +496,10 @@
 	});
 </script>
 
-<div class="mb-6 flex flex-wrap items-center justify-between gap-3">
+<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
 	<div>
 		<h1 class="text-2xl font-semibold tracking-tight">Mihomo</h1>
-		<p class="text-muted-foreground text-sm">Обзор и прокси (external-controller)</p>
+		<p class="text-sm text-muted-foreground">Обзор и прокси (external-controller)</p>
 	</div>
 	<Tabs.Root bind:value={tab} class="w-fit shrink-0">
 		<Tabs.List class="min-w-[220px] gap-0.5 p-1">

web/src/routes/users/+page.svelte

@@ -343,7 +343,7 @@ let sumActiveIps = $derived.by(() =>
 	}
 </script>
 
-<div class="mb-6 flex flex-wrap items-end justify-between gap-4">
+<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
 	<div>
 		<h1 class="text-2xl font-semibold tracking-tight">Пользователи (флот)</h1>
 		<p class="text-sm text-muted-foreground">