fixed clipping issue with cards on dashboard page

This commit is contained in:
Ben
2024-09-06 12:43:27 +00:00
parent 87a395683d
commit 3f01a9e58e
2 changed files with 10 additions and 2 deletions

View File

@ -49,7 +49,10 @@ export const ResumesPage = () => {
</TabsList> </TabsList>
</div> </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"> <TabsContent value="grid">
<GridView /> <GridView />
</TabsContent> </TabsContent>

View File

@ -7,6 +7,7 @@ export const ScrollArea = forwardRef<
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & { React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
hideScrollbar?: boolean; hideScrollbar?: boolean;
orientation?: "vertical" | "horizontal"; orientation?: "vertical" | "horizontal";
allowOverflow?: boolean;
} }
>( >(
( (
@ -14,6 +15,7 @@ export const ScrollArea = forwardRef<
type = "scroll", type = "scroll",
orientation = "vertical", orientation = "vertical",
hideScrollbar = false, hideScrollbar = false,
allowOverflow = false,
className, className,
children, children,
...props ...props
@ -26,7 +28,10 @@ export const ScrollArea = forwardRef<
className={cn("relative overflow-hidden", className)} className={cn("relative overflow-hidden", className)}
{...props} {...props}
> >
<ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]"> <ScrollAreaPrimitive.Viewport
className="size-full rounded-[inherit]"
style={allowOverflow ? { overflowX: "visible", overflowY: "visible" } : {}}
>
{children} {children}
</ScrollAreaPrimitive.Viewport> </ScrollAreaPrimitive.Viewport>
<ScrollBar orientation={orientation} className={cn(hideScrollbar && "opacity-0")} /> <ScrollBar orientation={orientation} className={cn(hideScrollbar && "opacity-0")} />