From c7363547397bf2bcfeb6cb66879fa30fd0a32fa6 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 13 Oct 2025 19:30:58 +0530
Subject: [PATCH] [WEB-5130] chore: propel scroll area improvement #7952

---
 packages/propel/src/scrollarea/scrollarea.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/propel/src/scrollarea/scrollarea.tsx b/packages/propel/src/scrollarea/scrollarea.tsx
index b3f833015..e15d02e12 100644
--- a/packages/propel/src/scrollarea/scrollarea.tsx
+++ b/packages/propel/src/scrollarea/scrollarea.tsx
@@ -11,14 +11,27 @@ interface ScrollAreaProps extends React.ComponentProps<typeof BaseScrollArea.Roo
   orientation?: ScrollAreaOrientation;
   scrollType?: ScrollAreaScrollType;
   size?: ScrollAreaSize;
+  rootClassName?: string;
+  viewportClassName?: string;
 }
 
-function ScrollArea({ className, children, orientation, scrollType, size = "md", ...props }: ScrollAreaProps) {
+function ScrollArea({
+  children,
+  orientation,
+  scrollType,
+  size = "md",
+  rootClassName,
+  viewportClassName,
+  ...props
+}: ScrollAreaProps) {
   return (
-    <BaseScrollArea.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
+    <BaseScrollArea.Root data-slot="scroll-area" className={cn("relative", rootClassName)} {...props}>
       <BaseScrollArea.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full overscroll-contain rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline"
+        className={cn(
+          "focus-visible:ring-ring/50 size-full overscroll-contain rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline",
+          viewportClassName
+        )}
       >
         {children}
       </BaseScrollArea.Viewport>