From 3f01a9e58e0b165b87f448851da30db74a2ac3c7 Mon Sep 17 00:00:00 2001
From: Ben <66423091+noreb001@users.noreply.github.com>
Date: Fri, 6 Sep 2024 12:43:27 +0000
Subject: [PATCH] fixed clipping issue with cards on dashboard page

---
 apps/client/src/pages/dashboard/resumes/page.tsx | 5 ++++-
 libs/ui/src/components/scroll-area.tsx           | 7 ++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/pages/dashboard/resumes/page.tsx b/apps/client/src/pages/dashboard/resumes/page.tsx
index 5ab2a4724..4a2b3c093 100644
--- a/apps/client/src/pages/dashboard/resumes/page.tsx
+++ b/apps/client/src/pages/dashboard/resumes/page.tsx
@@ -49,7 +49,10 @@ export const ResumesPage = () => {
           </TabsList>
         </div>
 
-        <ScrollArea className="h-[calc(100vh-140px)] lg:h-[calc(100vh-88px)]">
+        <ScrollArea
+          className="h-[calc(100vh-140px)] overflow-visible lg:h-[calc(100vh-88px)]"
+          allowOverflow={true}
+        >
           <TabsContent value="grid">
             <GridView />
           </TabsContent>
diff --git a/libs/ui/src/components/scroll-area.tsx b/libs/ui/src/components/scroll-area.tsx
index 04013a505..b85cee665 100644
--- a/libs/ui/src/components/scroll-area.tsx
+++ b/libs/ui/src/components/scroll-area.tsx
@@ -7,6 +7,7 @@ export const ScrollArea = forwardRef<
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
     hideScrollbar?: boolean;
     orientation?: "vertical" | "horizontal";
+    allowOverflow?: boolean;
   }
 >(
   (
@@ -14,6 +15,7 @@ export const ScrollArea = forwardRef<
       type = "scroll",
       orientation = "vertical",
       hideScrollbar = false,
+      allowOverflow = false,
       className,
       children,
       ...props
@@ -26,7 +28,10 @@ export const ScrollArea = forwardRef<
       className={cn("relative overflow-hidden", className)}
       {...props}
     >
-      <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
+      <ScrollAreaPrimitive.Viewport
+        className="size-full rounded-[inherit]"
+        style={allowOverflow ? { overflowX: "visible", overflowY: "visible" } : {}}
+      >
         {children}
       </ScrollAreaPrimitive.Viewport>
       <ScrollBar orientation={orientation} className={cn(hideScrollbar && "opacity-0")} />