diff --git a/apps/www/registry/default/ui/scroll-area.tsx b/apps/www/registry/default/ui/scroll-area.tsx
index 54b87cd7657..590cec7fa18 100644
--- a/apps/www/registry/default/ui/scroll-area.tsx
+++ b/apps/www/registry/default/ui/scroll-area.tsx
@@ -40,7 +40,12 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb
+      className={cn(
+        "relative rounded-full bg-border",
+        orientation === "vertical" && "flex-1"
+      )}
+    />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
diff --git a/apps/www/registry/new-york/ui/scroll-area.tsx b/apps/www/registry/new-york/ui/scroll-area.tsx
index 54b87cd7657..590cec7fa18 100644
--- a/apps/www/registry/new-york/ui/scroll-area.tsx
+++ b/apps/www/registry/new-york/ui/scroll-area.tsx
@@ -40,7 +40,12 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb
+      className={cn(
+        "relative rounded-full bg-border",
+        orientation === "vertical" && "flex-1"
+      )}
+    />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName