Make scrollable areas more consistent (#952)

Co-authored-by: wintonzheng <null>

skyvern-frontend/src/components/ui/scroll-area.tsx

@@ -12,15 +12,26 @@ const ScrollArea = React.forwardRef<
     className={cn("relative overflow-hidden", className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
     {children}
-    </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
+const ScrollAreaViewport = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaViewport>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaViewport>
+>(({ children, ...props }, ref) => {
+  return (
+    <ScrollAreaPrimitive.Viewport ref={ref} {...props}>
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+  );
+});
+ScrollAreaViewport.displayName =
+  ScrollAreaPrimitive.ScrollAreaViewport.displayName;
+
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
@@ -43,4 +54,4 @@ const ScrollBar = React.forwardRef<
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar };
+export { ScrollArea, ScrollBar, ScrollAreaViewport };

skyvern-frontend/src/routes/tasks/create/PromptBox.tsx

@@ -10,7 +10,11 @@ import { AxiosError } from "axios";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { stringify as convertToYAML } from "yaml";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import {
+  ScrollArea,
+  ScrollAreaViewport,
+  ScrollBar,
+} from "@/components/ui/scroll-area";
 
 function createTaskFromTaskGenerationParameters(
   values: TaskGenerationApiResponse,
@@ -178,6 +182,7 @@ function PromptBox() {
         </div>
       </div>
       <ScrollArea>
+        <ScrollAreaViewport className="h-full w-full rounded-[inherit]">
           <div className="flex gap-4 rounded-sm bg-slate-elevation1 p-4">
             {examplePrompts.map((examplePrompt) => {
               return (
@@ -193,6 +198,7 @@ function PromptBox() {
               );
             })}
           </div>
+        </ScrollAreaViewport>
         <ScrollBar orientation="horizontal" />
       </ScrollArea>
     </div>

skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx

@@ -2,6 +2,7 @@ import { getClient } from "@/api/AxiosClient";
 import { Action, ActionTypes, ReadableActionTypes } from "@/api/types";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import {
   Tooltip,
@@ -155,7 +156,9 @@ function ScrollableActionList({
           <ArrowDownIcon />
         </Button>
       </div>
-      <div className="w-full space-y-4 overflow-y-scroll px-4 pb-4">
+      <ScrollArea>
+        <ScrollAreaViewport className="h-full w-full rounded-[inherit]">
+          <div className="w-full space-y-4 px-4 pb-4">
             {showStreamOption && (
               <div
                 key="stream"
@@ -178,6 +181,8 @@ function ScrollableActionList({
             )}
             {getReverseActions()}
           </div>
+        </ScrollAreaViewport>
+      </ScrollArea>
     </div>
   );
 }

skyvern-frontend/src/routes/workflows/editor/panels/WorkflowParametersPanel.tsx

@@ -26,6 +26,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { useReactFlow } from "@xyflow/react";
 import { useWorkflowHasChangesStore } from "@/store/WorkflowHasChangesStore";
+import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 
 const WORKFLOW_EDIT_PANEL_WIDTH = 20 * 16;
 const WORKFLOW_EDIT_PANEL_GAP = 1 * 16;
@@ -105,7 +106,9 @@ function WorkflowParametersPanel() {
           </DropdownMenuContent>
         </DropdownMenu>
 
-        <section className="max-h-[600px] space-y-2 overflow-y-scroll">
+        <ScrollArea>
+          <ScrollAreaViewport className="max-h-[600px]">
+            <section className="space-y-2">
               {workflowParameters.map((parameter) => {
                 return (
                   <div
@@ -168,8 +171,11 @@ function WorkflowParametersPanel() {
                                         data: {
                                           ...node.data,
                                           parameterKeys: (
-                                        node.data.parameterKeys as Array<string>
-                                      ).filter((key) => key !== parameter.key),
+                                            node.data
+                                              .parameterKeys as Array<string>
+                                          ).filter(
+                                            (key) => key !== parameter.key,
+                                          ),
                                         },
                                       };
                                     }
@@ -188,6 +194,8 @@ function WorkflowParametersPanel() {
                 );
               })}
             </section>
+          </ScrollAreaViewport>
+        </ScrollArea>
       </div>
       {operationPanelState.active && (
         <div