From c8724268e970b7c75a7c93a16832f764ddbc1451 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Tue, 31 Mar 2026 20:15:30 +0700
Subject: [PATCH] Refactor card components to standardize density and layout

- Updated Card component styles across multiple files to introduce a `density` prop, allowing for compact layouts and improved visual consistency.
- Removed unnecessary padding from card components to enhance alignment and create a more cohesive appearance throughout the application.
---
 .../components/data-table/data-table-card.svelte   |  2 +-
 .../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 +-
 web/src/lib/components/ui/card/card.svelte         | 14 ++++++++++++--
 6 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/web/src/lib/components/data-table/data-table-card.svelte b/web/src/lib/components/data-table/data-table-card.svelte
index 8bbab8d..c87bd40 100644
--- a/web/src/lib/components/data-table/data-table-card.svelte
+++ b/web/src/lib/components/data-table/data-table-card.svelte
@@ -19,7 +19,7 @@
 	} = $props();
 </script>
 
-<Card.Root class={cn('gap-0 py-0 overflow-hidden rounded-lg border border-border shadow-sm', className)}>
+<Card.Root density="compact" class={cn('overflow-hidden rounded-lg border border-border shadow-sm', className)}>
 	{#if title}
 		<Card.Header class="border-b border-border bg-muted/40 px-4 py-3">
 			<Card.Title class="text-base font-semibold">{title}</Card.Title>
diff --git a/web/src/lib/components/fleet/fleet-overview-charts.svelte b/web/src/lib/components/fleet/fleet-overview-charts.svelte
index 927c078..3101902 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="gap-0 py-0 overflow-hidden rounded-lg border border-border shadow-sm">
+	<Card.Root density="compact" class="overflow-hidden rounded-lg border border-border shadow-sm">
 		<Card.Header 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="gap-0 py-0 overflow-hidden rounded-lg border border-border shadow-sm">
+	<Card.Root density="compact" class="overflow-hidden rounded-lg border border-border shadow-sm">
 		<Card.Header 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 6b1dd81..17f760a 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('gap-0 py-0 border-l-4 shadow-sm', kpiAccent[accent].border, className)}>
+<Card.Root class={cn('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 c982c45..5372636 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('gap-0 py-0 border-l-4 shadow-sm transition-colors', kpiAccent[accent].border, className)}>
+<Card.Root class={cn('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 1ce3e1d..61c56a9 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(
-		'gap-0 py-0 border-border bg-card shadow-sm transition-colors dark:bg-card/80',
+		'border-border bg-card shadow-sm transition-colors dark:bg-card/80',
 		className
 	)}
 >
diff --git a/web/src/lib/components/ui/card/card.svelte b/web/src/lib/components/ui/card/card.svelte
index 2b4f81a..394de3d 100644
--- a/web/src/lib/components/ui/card/card.svelte
+++ b/web/src/lib/components/ui/card/card.svelte
@@ -7,15 +7,25 @@
 		class: className,
 		children,
 		size = "default",
+		density = "default",
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		size?: "default" | "sm";
+		density?: "default" | "compact";
+	} = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="card"
 	data-size={size}
-	class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
+	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",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}