From 510ec46aef5b046a6fd2fcaae068843e57db631f Mon Sep 17 00:00:00 2001
From: Anx <anxsec@gmail.com>
Date: Wed, 23 Jul 2025 18:59:11 +0800
Subject: [PATCH] fix: prevent right panel content overflow in ScrollArea
 component

Resolves content overflow issues in the right panel caused by the ScrollArea
component's internal div with 'min-width:100%;display:table' styling. This
addresses the known shadcn-ui ScrollArea limitation where the component takes
up the entire width and causes overflow.

The fix ensures proper width constraints while maintaining scroll functionality.

References: https://github.com/shadcn-ui/ui/issues/3833
---
 frontend/src/components/ui/scroll-area.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/scroll-area.tsx b/frontend/src/components/ui/scroll-area.tsx
index e94be071..2c90e48a 100644
--- a/frontend/src/components/ui/scroll-area.tsx
+++ b/frontend/src/components/ui/scroll-area.tsx
@@ -18,7 +18,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&>div]:!block"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>