From e8382895e5a208f615518f51e52c790bb95e18b1 Mon Sep 17 00:00:00 2001
From: GuanMu <ballmanjq@gmail.com>
Date: Fri, 11 Jul 2025 05:52:53 +0000
Subject: [PATCH] fix: Update workflow preview panel width calculation to
 ensure the panel width is within the canvas boundaries and set a minimum
 width limit of 400px.

---
 .../workflow/panel/workflow-preview.tsx       | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index af66a414f7..2c797e05d6 100644
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@@ -32,6 +32,9 @@ const WorkflowPreview = () => {
   const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
   const workflowRunningData = useStore(s => s.workflowRunningData)
   const showInputsPanel = useStore(s => s.showInputsPanel)
+  const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
+  const panelWidth = useStore(s => s.previewPanelWidth)
+  const setPreviewPanelWidth = useStore(s => s.setPreviewPanelWidth)
   const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
   const [currentTab, setCurrentTab] = useState<string>(showInputsPanel ? 'INPUT' : 'TRACING')
 
@@ -49,7 +52,6 @@ const WorkflowPreview = () => {
       switchTab('DETAIL')
   }, [workflowRunningData])
 
-  const [panelWidth, setPanelWidth] = useState(420)
   const [isResizing, setIsResizing] = useState(false)
 
   const startResizing = useCallback((e: React.MouseEvent) => {
@@ -64,10 +66,14 @@ const WorkflowPreview = () => {
   const resize = useCallback((e: MouseEvent) => {
     if (isResizing) {
       const newWidth = window.innerWidth - e.clientX
-      if (newWidth > 420 && newWidth < 1024)
-        setPanelWidth(newWidth)
+      // width constraints: 400 <= width <= maxAllowed (canvas - reserved 400)
+      const reservedCanvasWidth = 400
+      const maxAllowed = workflowCanvasWidth ? (workflowCanvasWidth - reservedCanvasWidth) : 1024
+
+      if (newWidth >= 400 && newWidth <= maxAllowed)
+        setPreviewPanelWidth(newWidth)
     }
-  }, [isResizing])
+  }, [isResizing, workflowCanvasWidth, setPreviewPanelWidth])
 
   useEffect(() => {
     window.addEventListener('mousemove', resize)
@@ -79,9 +85,9 @@ const WorkflowPreview = () => {
   }, [resize, stopResizing])
 
   return (
-    <div className={`
-      relative flex h-full flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl
-    `}
+    <div className={
+      'relative flex h-full flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'
+    }
       style={{ width: `${panelWidth}px` }}
     >
       <div