From 54395bc36aa1f4d842237b7312652f9e5a4425a2 Mon Sep 17 00:00:00 2001
From: Jonathan Dobson <jon.m.dobson@gmail.com>
Date: Wed, 3 Sep 2025 12:25:23 -0400
Subject: [PATCH] Debugger: Increase left-side width (#3350)

---
 skyvern-frontend/src/routes/workflows/editor/Workspace.tsx    | 4 ++--
 .../src/routes/workflows/editor/workflowEditorUtils.ts        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx b/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx
index 2119005a..6dc0b64c 100644
--- a/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx
@@ -731,7 +731,7 @@ function Workspace({
       <div className="relative flex h-full w-full overflow-hidden overflow-x-hidden">
         {/* infinite canvas */}
         <div
-          className={cn("skyvern-split-left h-full w-[33rem] min-w-[33rem]", {
+          className={cn("skyvern-split-left h-full w-[39rem] min-w-[39rem]", {
             "w-full": !showBrowser,
           })}
         >
@@ -755,7 +755,7 @@ function Workspace({
 
         {/* browser & timeline & sub-panels in debug mode */}
         {showBrowser && (
-          <div className="skyvern-split-right relative flex h-full w-[calc(100%_-_33rem)] items-end justify-center bg-[#020617] p-4 pl-6">
+          <div className="skyvern-split-right relative flex h-full w-[calc(100%_-_39rem)] items-end justify-center bg-[#020617] p-4 pl-6">
             {/* sub panels */}
             {workflowPanelState.active && (
               <div
diff --git a/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts b/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts
index 11a16e5f..56c2bb2c 100644
--- a/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts
+++ b/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts
@@ -149,7 +149,7 @@ export function descendants(nodes: Array<AppNode>, id: string): Array<AppNode> {
 export function getLoopNodeWidth(node: AppNode, nodes: Array<AppNode>): number {
   const maxNesting = maxNestingLevel(nodes);
   const nestingLevel = getNestingLevel(node, nodes);
-  return 600 + (maxNesting - nestingLevel) * 50;
+  return 450 + (maxNesting - nestingLevel) * 50;
 }
 
 function maxNestingLevel(nodes: Array<AppNode>): number {