From cc6fac7605aa2c33e3e5bc3e9e4466ded383f8f8 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Tue, 25 Mar 2025 07:12:30 -0700
Subject: [PATCH] Put max height on file panel (#2020)

---
 .../src/routes/workflows/WorkflowRun.tsx      | 38 +++++++++++--------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
index 12491c05..a7ac0e61 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
@@ -39,6 +39,7 @@ import { getAggregatedExtractedInformation } from "./workflowRun/workflowRunUtil
 import { Label } from "@/components/ui/label";
 import { CodeEditor } from "./components/CodeEditor";
 import { cn } from "@/util/utils";
+import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 
 function WorkflowRun() {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -282,22 +283,27 @@ function WorkflowRun() {
           {hasFileUrls && (
             <div className="space-y-4">
               <Label>Downloaded Files</Label>
-              <div className="space-y-2">
-                {fileUrls.length > 0 ? (
-                  fileUrls.map((url, index) => {
-                    return (
-                      <div key={url} title={url} className="flex gap-2">
-                        <FileIcon className="size-6" />
-                        <a href={url} className="underline underline-offset-4">
-                          <span>{`File ${index + 1}`}</span>
-                        </a>
-                      </div>
-                    );
-                  })
-                ) : (
-                  <div className="text-sm">No files downloaded</div>
-                )}
-              </div>
+              <ScrollArea>
+                <ScrollAreaViewport className="max-h-[250px] space-y-2">
+                  {fileUrls.length > 0 ? (
+                    fileUrls.map((url, index) => {
+                      return (
+                        <div key={url} title={url} className="flex gap-2">
+                          <FileIcon className="size-6" />
+                          <a
+                            href={url}
+                            className="underline underline-offset-4"
+                          >
+                            <span>{`File ${index + 1}`}</span>
+                          </a>
+                        </div>
+                      );
+                    })
+                  ) : (
+                    <div className="text-sm">No files downloaded</div>
+                  )}
+                </ScrollAreaViewport>
+              </ScrollArea>
             </div>
           )}
         </div>