From 4f80a8c0d1c1f309d1e36f08421b3ab1378b7ff0 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Tue, 31 Mar 2026 19:58:48 +0700
Subject: [PATCH] Refactor card components for improved layout consistency

- Updated padding and gap settings in the Card component across multiple files to enhance visual alignment and maintain a cohesive appearance.
---
 web/src/lib/components/fleet/fleet-overview-charts.svelte | 4 ++--
 web/src/lib/components/kpi-panel-card.svelte              | 2 +-
 web/src/lib/components/kpi-stat-card.svelte               | 2 +-
 web/src/lib/components/kpi-trend-card.svelte              | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/lib/components/fleet/fleet-overview-charts.svelte b/web/src/lib/components/fleet/fleet-overview-charts.svelte
index 2b31347..d980c17 100644
--- a/web/src/lib/components/fleet/fleet-overview-charts.svelte
+++ b/web/src/lib/components/fleet/fleet-overview-charts.svelte
@@ -140,7 +140,7 @@
 </script>
 
 <div class="mb-6 grid gap-4 lg:grid-cols-2">
-	<Card.Root class="overflow-hidden rounded-lg border border-border shadow-sm">
+	<Card.Root class="gap-0 py-0 overflow-hidden rounded-lg border border-border shadow-sm">
 		<div class="border-b border-border bg-muted/40 px-4 py-3">
 			<div class="flex items-center gap-2">
 				<div class="flex size-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
@@ -156,7 +156,7 @@
 			<canvas bind:this={elDonut} class="max-h-full w-full"></canvas>
 		</Card.Content>
 	</Card.Root>
-	<Card.Root class="overflow-hidden rounded-lg border border-border shadow-sm">
+	<Card.Root class="gap-0 py-0 overflow-hidden rounded-lg border border-border shadow-sm">
 		<div class="border-b border-border bg-muted/40 px-4 py-3">
 			<div class="flex items-center gap-2">
 				<div class="flex size-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
diff --git a/web/src/lib/components/kpi-panel-card.svelte b/web/src/lib/components/kpi-panel-card.svelte
index 17f760a..6b1dd81 100644
--- a/web/src/lib/components/kpi-panel-card.svelte
+++ b/web/src/lib/components/kpi-panel-card.svelte
@@ -26,7 +26,7 @@
 	} = $props();
 </script>
 
-<Card.Root class={cn('border-l-4 shadow-sm', kpiAccent[accent].border, className)}>
+<Card.Root class={cn('gap-0 py-0 border-l-4 shadow-sm', kpiAccent[accent].border, className)}>
 	<Card.Header class={cn(headerClass)}>
 		<div class="flex gap-3">
 			<div
diff --git a/web/src/lib/components/kpi-stat-card.svelte b/web/src/lib/components/kpi-stat-card.svelte
index 5372636..c982c45 100644
--- a/web/src/lib/components/kpi-stat-card.svelte
+++ b/web/src/lib/components/kpi-stat-card.svelte
@@ -25,7 +25,7 @@
 	} = $props();
 </script>
 
-<Card.Root class={cn('border-l-4 shadow-sm transition-colors', kpiAccent[accent].border, className)}>
+<Card.Root class={cn('gap-0 py-0 border-l-4 shadow-sm transition-colors', kpiAccent[accent].border, className)}>
 	<Card.Header class="pb-2">
 		<div class="flex gap-3">
 			<div
diff --git a/web/src/lib/components/kpi-trend-card.svelte b/web/src/lib/components/kpi-trend-card.svelte
index 61c56a9..1ce3e1d 100644
--- a/web/src/lib/components/kpi-trend-card.svelte
+++ b/web/src/lib/components/kpi-trend-card.svelte
@@ -62,7 +62,7 @@
 
 <Card.Root
 	class={cn(
-		'border-border bg-card shadow-sm transition-colors dark:bg-card/80',
+		'gap-0 py-0 border-border bg-card shadow-sm transition-colors dark:bg-card/80',
 		className
 	)}
 >