From ab58527684c669d6b0ce549a3fb9c83e80edce1c Mon Sep 17 00:00:00 2001
From: Celal Zamanoglu <95054566+celalzamanoglu@users.noreply.github.com>
Date: Fri, 23 Jan 2026 19:29:06 +0300
Subject: [PATCH] fix workflow history panel scroll in debug mode (#4532)

---
 .../src/routes/workflows/editor/Workspace.tsx |  10 +-
 .../editor/panels/WorkflowHistoryPanel.tsx    | 120 +++++++++---------
 2 files changed, 67 insertions(+), 63 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx b/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx
index 480dcc56..9f79e252 100644
--- a/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx
@@ -1412,10 +1412,12 @@ function Workspace({
               <WorkflowParametersPanel />
             )}
             {workflowPanelState.content === "history" && (
-              <WorkflowHistoryPanel
-                workflowPermanentId={workflowPermanentId!}
-                onCompare={handleCompareVersions}
-              />
+              <div className="h-[calc(100vh-14rem)]">
+                <WorkflowHistoryPanel
+                  workflowPermanentId={workflowPermanentId!}
+                  onCompare={handleCompareVersions}
+                />
+              </div>
             )}
           </div>
         )}
diff --git a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowHistoryPanel.tsx b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowHistoryPanel.tsx
index 83d7ebc5..f4e0ad47 100644
--- a/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowHistoryPanel.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/panels/WorkflowHistoryPanel.tsx
@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Badge } from "@/components/ui/badge";
-import { ScrollArea } from "@/components/ui/scroll-area";
+import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { basicLocalTimeFormat } from "@/util/timeFormat";
 import {
@@ -90,7 +90,7 @@ function WorkflowHistoryPanel({ workflowPermanentId, onCompare }: Props) {
   const canCompare = selectedVersions.size === 2;
 
   return (
-    <div className="flex h-full w-[25rem] flex-col rounded-lg bg-slate-elevation2">
+    <div className="flex h-full w-[25rem] flex-col overflow-hidden rounded-lg bg-slate-elevation2">
       {/* Header */}
       <div className="flex-shrink-0 p-4 pb-3">
         <div className="flex items-center justify-between">
@@ -129,67 +129,69 @@ function WorkflowHistoryPanel({ workflowPermanentId, onCompare }: Props) {
       <Separator />
 
       {/* Version List */}
-      <ScrollArea className="flex-1">
-        <div className="p-4">
-          {isLoading ? (
-            <div className="space-y-3">
-              {Array.from({ length: 5 }).map((_, i) => (
-                <div
-                  key={i}
-                  className="flex items-center space-x-3 rounded-lg border p-3"
-                >
-                  <Skeleton className="h-4 w-4" />
-                  <div className="flex-1 space-y-2">
-                    <Skeleton className="h-4 w-20" />
-                    <Skeleton className="h-3 w-32" />
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : sortedVersions.length === 0 ? (
-            <div className="py-8 text-center text-muted-foreground">
-              No version history found
-            </div>
-          ) : (
-            <div className="space-y-2">
-              {sortedVersions.map((workflow, index) => {
-                const isSelected = selectedVersions.has(workflow.version);
-                const isCurrent = index === 0;
-
-                return (
+      <ScrollArea className="min-h-0 flex-1">
+        <ScrollAreaViewport className="h-full">
+          <div className="p-4">
+            {isLoading ? (
+              <div className="space-y-3">
+                {Array.from({ length: 5 }).map((_, i) => (
                   <div
-                    key={workflow.version}
-                    className={`flex cursor-pointer items-center space-x-3 rounded-lg border p-3 transition-colors ${
-                      isSelected
-                        ? "border-primary/20 bg-primary/5"
-                        : "hover:bg-muted/50"
-                    }`}
-                    onClick={() => handleVersionToggle(workflow.version)}
+                    key={i}
+                    className="flex items-center space-x-3 rounded-lg border p-3"
                   >
-                    <Checkbox
-                      checked={isSelected}
-                      onChange={() => {}} // Handled by parent click
-                    />
-
-                    <div className="flex-1">
-                      <div className="flex items-center gap-2">
-                        <span className="font-medium">
-                          Version {workflow.version}
-                        </span>
-                        {isCurrent && (
-                          <Badge variant="secondary">Current</Badge>
-                        )}
-                      </div>
-                      <div className="text-sm text-muted-foreground">
-                        Modified: {basicLocalTimeFormat(workflow.modified_at)}
-                      </div>
+                    <Skeleton className="h-4 w-4" />
+                    <div className="flex-1 space-y-2">
+                      <Skeleton className="h-4 w-20" />
+                      <Skeleton className="h-3 w-32" />
                     </div>
                   </div>
-                );
-              })}
-            </div>
-          )}
-        </div>
+                ))}
+              </div>
+            ) : sortedVersions.length === 0 ? (
+              <div className="py-8 text-center text-muted-foreground">
+                No version history found
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {sortedVersions.map((workflow, index) => {
+                  const isSelected = selectedVersions.has(workflow.version);
+                  const isCurrent = index === 0;
+
+                  return (
+                    <div
+                      key={workflow.version}
+                      className={`flex cursor-pointer items-center space-x-3 rounded-lg border p-3 transition-colors ${
+                        isSelected
+                          ? "border-primary/20 bg-primary/5"
+                          : "hover:bg-muted/50"
+                      }`}
+                      onClick={() => handleVersionToggle(workflow.version)}
+                    >
+                      <Checkbox
+                        checked={isSelected}
+                        onChange={() => {}} // Handled by parent click
+                      />
+
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2">
+                          <span className="font-medium">
+                            Version {workflow.version}
+                          </span>
+                          {isCurrent && (
+                            <Badge variant="secondary">Current</Badge>
+                          )}
+                        </div>
+                        <div className="text-sm text-muted-foreground">
+                          Modified: {basicLocalTimeFormat(workflow.modified_at)}
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </ScrollAreaViewport>
       </ScrollArea>
     </div>
   );