From d5d0326bf36064f8c7a2620b0a6d402ee8be8240 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Tue, 31 Mar 2026 19:45:07 +0700
Subject: [PATCH] Refactor card and user page components for improved styling
 and layout

- Adjusted padding and gap settings in the card component for a cleaner appearance.
- Updated the user page layout to enhance the ScrollArea and table styling, ensuring better alignment and visual consistency.
- Improved the overall structure of the user page for a more cohesive user experience.
---
 web/src/lib/components/ui/card/card.svelte | 2 +-
 web/src/routes/users/+page.svelte          | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/ui/card/card.svelte b/web/src/lib/components/ui/card/card.svelte
index 2b4f81a..d364eee 100644
--- a/web/src/lib/components/ui/card/card.svelte
+++ b/web/src/lib/components/ui/card/card.svelte
@@ -15,7 +15,7 @@
 	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)}
+	class={cn("ring-foreground/10 bg-card text-card-foreground gap-0 overflow-hidden rounded-xl py-0 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-0 data-[size=sm]:py-0 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)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/src/routes/users/+page.svelte b/web/src/routes/users/+page.svelte
index ba22e7a..9ed0986 100644
--- a/web/src/routes/users/+page.svelte
+++ b/web/src/routes/users/+page.svelte
@@ -460,7 +460,11 @@
 				</div>
 			</div>
 		{/snippet}
-		<ScrollArea class="max-h-[min(70vh,560px)] w-full" orientation="both">
+		<div class="flex w-full flex-col">
+		<ScrollArea
+			class="h-[min(70vh,560px)] w-full shrink-0"
+			orientation="both"
+		>
 			<Table.Root>
 				<Table.Header class="sticky top-0 z-10 bg-muted">
 					<Table.Row class="border-b border-border/80 hover:bg-transparent">
@@ -661,7 +665,7 @@
 		</ScrollArea>
 			{#if processedRows.length > usersPerPage}
 				<div
-					class="flex flex-wrap items-center justify-between gap-2 border-t px-4 py-3 text-sm text-muted-foreground"
+					class="relative z-10 flex shrink-0 flex-wrap items-center justify-between gap-2 border-t border-border bg-card px-4 py-3 text-sm text-muted-foreground"
 				>
 					<span>
 						{processedRows.length === 0
@@ -684,6 +688,7 @@
 					</div>
 				</div>
 			{/if}
+		</div>
 	</DataTableCard>
 	{/snippet}
 </DataQueryState>