Merge pull request #2035 from noreb001/bugfix/CardClippingIssue

bugfix: Fixed clipping issue with cards on dashboard page

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>

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")} />