From 6264d775cb0b5ec3868c5c8f8338c71dda42cf8d Mon Sep 17 00:00:00 2001
From: SameerJS6 <singh6.sameer@gmail.com>
Date: Fri, 26 Sep 2025 09:00:06 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Refactor=20PageCard=20to=20integrat?=
 =?UTF-8?q?e=20Lina=20(ScrollArea)=20for=20improved=20scrolling=20experien?=
 =?UTF-8?q?ce?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pageCard.svelte | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/pageCard.svelte b/src/components/pageCard.svelte
index bae8938..870f874 100644
--- a/src/components/pageCard.svelte
+++ b/src/components/pageCard.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import { cn } from "@/utils/cn";
+  import ScrollArea from "./ui/scroll-area/scroll-area.svelte";
+  import { ScrollAreaScrollbar } from "./ui/scroll-area";
 
   interface PageCardProps {
     children: Snippet;
@@ -21,14 +23,16 @@
       containerClass,
     )}
   >
-    <div
+    <ScrollArea
+      maskHeight={50}
+      maskClassName="before:from-transparent after:from-white dark:before:from-[#0f0f0f] dark:after:from-[#0f0f0f]"
       class={cn(
-        "max-h-[calc(100vh-4.5rem)] min-h-[calc(100vh-4.5rem)]",
-        "overflow-hidden overflow-y-auto",
+        "flex size-full max-h-[calc(100vh-4.5rem)] min-h-[calc(100vh-4.5rem)] flex-col",
         contentCardClass,
       )}
     >
+      <ScrollAreaScrollbar orientation="vertical" class="relative z-99999" />
       {@render children?.()}
-    </div>
+    </ScrollArea>
   </div>
 </div>