From 6f5f123aa821bb7f2115f3bd7bd549f20349bab1 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Tue, 31 Mar 2026 20:27:09 +0700
Subject: [PATCH] Refactor card component styles for improved layout
 consistency

- Standardized Card component classes across multiple files by removing unnecessary padding and gaps, enhancing visual alignment and creating a more cohesive appearance throughout the application.
---
 web/src/lib/components/ui/card/card.svelte         | 4 ++--
 web/src/routes/+page.svelte                        | 2 +-
 web/src/routes/incidents/+page.svelte              | 4 ++--
 web/src/routes/ips/+page.svelte                    | 4 ++--
 web/src/routes/mihomo/+page.svelte                 | 2 +-
 web/src/routes/servers/[alias]/+page.svelte        | 2 +-
 web/src/routes/servers/[alias]/mihomo/+page.svelte | 4 ++--
 web/src/routes/users/+page.svelte                  | 2 +-
 8 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/web/src/lib/components/ui/card/card.svelte b/web/src/lib/components/ui/card/card.svelte
index 394de3d..f58b4c9 100644
--- a/web/src/lib/components/ui/card/card.svelte
+++ b/web/src/lib/components/ui/card/card.svelte
@@ -22,8 +22,8 @@
 	data-density={density}
 	class={cn(
 		"ring-foreground/10 bg-card text-card-foreground overflow-hidden rounded-xl text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
-		"density-default gap-4 py-4 data-[size=sm]:gap-3 data-[size=sm]:py-3",
-		"density-compact gap-0 py-0",
+		"data-[density=default]:gap-4 data-[density=default]:py-4 data-[density=default]:data-[size=sm]:gap-3 data-[density=default]:data-[size=sm]:py-3",
+		"data-[density=compact]:gap-0 data-[density=compact]:py-0",
 		className
 	)}
 	{...restProps}
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 03d9954..ec05a59 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -563,7 +563,7 @@
 	{#snippet skeleton()}
 		<div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
 			{#each Array.from({ length: 6 }) as _, i (i)}
-				<Card.Root class="gap-0 py-0 border border-border shadow-sm">
+				<Card.Root class="border border-border shadow-sm">
 					<Card.Header class="space-y-2 pb-2">
 						<Skeleton class="h-3 w-24" />
 						<Skeleton class="h-8 w-20" />
diff --git a/web/src/routes/incidents/+page.svelte b/web/src/routes/incidents/+page.svelte
index 21c74a8..2e5e23e 100644
--- a/web/src/routes/incidents/+page.svelte
+++ b/web/src/routes/incidents/+page.svelte
@@ -312,7 +312,7 @@
 	{#snippet skeleton()}
 		<div class="mb-4 grid gap-4 sm:grid-cols-3">
 			{#each Array.from({ length: 3 }) as _, i (i)}
-				<Card.Root class="gap-0 py-0">
+				<Card.Root>
 					<Card.Header class="pb-2">
 						<Skeleton class="h-4 w-20" />
 						<Skeleton class="mt-2 h-8 w-12" />
@@ -320,7 +320,7 @@
 				</Card.Root>
 			{/each}
 		</div>
-		<Card.Root class="gap-0 py-0">
+		<Card.Root>
 			<Card.Content class="space-y-2 p-4">
 				{#each Array.from({ length: 6 }) as _, i (i)}
 					<Skeleton class="h-12 w-full" />
diff --git a/web/src/routes/ips/+page.svelte b/web/src/routes/ips/+page.svelte
index 282624f..205d7dc 100644
--- a/web/src/routes/ips/+page.svelte
+++ b/web/src/routes/ips/+page.svelte
@@ -528,7 +528,7 @@
 >
 	{#snippet skeleton()}
 		<div class="space-y-4">
-			<Card.Root class="gap-0 py-0">
+			<Card.Root>
 				<Card.Header>
 					<Skeleton class="h-5 w-48" />
 					<Skeleton class="h-4 w-64" />
@@ -537,7 +537,7 @@
 					<Skeleton class="h-[420px] w-full rounded-md" />
 				</Card.Content>
 			</Card.Root>
-			<Card.Root class="gap-0 py-0">
+			<Card.Root>
 				<Card.Content class="space-y-2 p-4">
 					{#each Array.from({ length: 6 }) as _, i (i)}
 						<Skeleton class="h-10 w-full" />
diff --git a/web/src/routes/mihomo/+page.svelte b/web/src/routes/mihomo/+page.svelte
index 0868824..e6da018 100644
--- a/web/src/routes/mihomo/+page.svelte
+++ b/web/src/routes/mihomo/+page.svelte
@@ -255,7 +255,7 @@
 				</KpiStatCard>
 			</div>
 
-			<Card.Root class="gap-0 py-0 border-l-4 border-l-violet-500/40 shadow-sm">
+			<Card.Root class="border-l-4 border-l-violet-500/40 shadow-sm">
 				<Card.Header class="pb-2">
 					<Card.Title class="text-base">Ноды</Card.Title>
 					<Card.Description>
diff --git a/web/src/routes/servers/[alias]/+page.svelte b/web/src/routes/servers/[alias]/+page.svelte
index 5af8800..b4e87e5 100644
--- a/web/src/routes/servers/[alias]/+page.svelte
+++ b/web/src/routes/servers/[alias]/+page.svelte
@@ -114,7 +114,7 @@
 	{#snippet skeleton()}
 		<div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
 			{#each Array.from({ length: 4 }) as _, i (i)}
-				<Card.Root class="gap-0 py-0 border border-border shadow-sm">
+				<Card.Root class="border border-border shadow-sm">
 					<Card.Header class="space-y-2 pb-2">
 						<Skeleton class="h-3 w-24" />
 						<Skeleton class="h-8 w-20" />
diff --git a/web/src/routes/servers/[alias]/mihomo/+page.svelte b/web/src/routes/servers/[alias]/mihomo/+page.svelte
index 9aa3e95..84e830b 100644
--- a/web/src/routes/servers/[alias]/mihomo/+page.svelte
+++ b/web/src/routes/servers/[alias]/mihomo/+page.svelte
@@ -514,7 +514,7 @@
 		<Skeleton class="mb-4 h-6 w-96 max-w-full" />
 		<div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
 			{#each Array.from({ length: 6 }) as _, i (i)}
-				<Card.Root class="gap-0 py-0 border-l-4 border-l-muted-foreground/30 shadow-sm">
+				<Card.Root class="border-l-4 border-l-muted-foreground/30 shadow-sm">
 					<Card.Header class="pb-2">
 						<div class="flex gap-3">
 							<Skeleton class="size-10 shrink-0 rounded-lg" />
@@ -532,7 +532,7 @@
 		</div>
 		<div class="grid gap-4 lg:grid-cols-2">
 			{#each Array.from({ length: 6 }) as _, i (i)}
-				<Card.Root class="gap-0 py-0 border-l-4 border-l-muted-foreground/30 shadow-sm">
+				<Card.Root class="border-l-4 border-l-muted-foreground/30 shadow-sm">
 					<Card.Header class="pb-2">
 						<div class="flex gap-3">
 							<Skeleton class="size-10 shrink-0 rounded-lg" />
diff --git a/web/src/routes/users/+page.svelte b/web/src/routes/users/+page.svelte
index dc3b1f3..9ed0986 100644
--- a/web/src/routes/users/+page.svelte
+++ b/web/src/routes/users/+page.svelte
@@ -366,7 +366,7 @@
 	isEmpty={isDataEmpty}
 >
 	{#snippet skeleton()}
-		<Card.Root class="gap-0 py-0">
+		<Card.Root>
 			<Card.Content class="space-y-2 p-4">
 				{#each Array.from({ length: 8 }) as _, i (i)}
 					<Skeleton class="h-10 w-full" />