From 53cc9ccaa05ecefde036746e28b03c27c70ad02d Mon Sep 17 00:00:00 2001
From: GuanMu <ballmanjq@gmail.com>
Date: Fri, 11 Jul 2025 04:40:39 +0000
Subject: [PATCH] fix: Optimize the workspace panel width calculation, ensuring
 the node panel and preview panel are within the canvas width, with a minimum
 width limit of 400px.

---
 .../_base/components/workflow-panel/index.tsx | 18 +++++++++-----
 web/app/components/workflow/panel/index.tsx   | 24 +++++++++++++++++++
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
index 164369e64c..fb7ad6ed43 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
@@ -83,18 +83,19 @@ const BasePanel: FC<BasePanelProps> = ({
   const otherPanelWidth = useStore(s => s.otherPanelWidth)
   const setNodePanelWidth = useStore(s => s.setNodePanelWidth)
 
+  const reservedCanvasWidth = 400 // 保证画布最小可见宽度
+
   const maxNodePanelWidth = useMemo(() => {
     if (!workflowCanvasWidth)
       return 720
-    if (!otherPanelWidth)
-      return workflowCanvasWidth - 400
 
-    return workflowCanvasWidth - otherPanelWidth - 400
+    const available = workflowCanvasWidth - (otherPanelWidth || 0) - reservedCanvasWidth
+    return Math.max(available, 400)
   }, [workflowCanvasWidth, otherPanelWidth])
 
   const updateNodePanelWidth = useCallback((width: number) => {
     // Ensure the width is within the min and max range
-    const newValue = Math.min(Math.max(width, 400), maxNodePanelWidth)
+    const newValue = Math.max(400, Math.min(width, maxNodePanelWidth))
     localStorage.setItem('workflow-node-panel-width', `${newValue}`)
     setNodePanelWidth(newValue)
   }, [maxNodePanelWidth, setNodePanelWidth])
@@ -118,8 +119,13 @@ const BasePanel: FC<BasePanelProps> = ({
   useEffect(() => {
     if (!workflowCanvasWidth)
       return
-    if (workflowCanvasWidth - 400 <= nodePanelWidth + otherPanelWidth)
-      debounceUpdate(workflowCanvasWidth - 400 - otherPanelWidth)
+
+    // If the total width of the three exceeds the canvas, shrink the node panel to the available range (at least 400px)
+    const total = nodePanelWidth + otherPanelWidth + reservedCanvasWidth
+    if (total > workflowCanvasWidth) {
+      const target = Math.max(workflowCanvasWidth - otherPanelWidth - reservedCanvasWidth, 400)
+      debounceUpdate(target)
+    }
   }, [nodePanelWidth, otherPanelWidth, workflowCanvasWidth, updateNodePanelWidth])
 
   const { handleNodeSelect } = useNodesInteractions()
diff --git a/web/app/components/workflow/panel/index.tsx b/web/app/components/workflow/panel/index.tsx
index c728df97ee..ccfe8fac58 100644
--- a/web/app/components/workflow/panel/index.tsx
+++ b/web/app/components/workflow/panel/index.tsx
@@ -77,6 +77,30 @@ const Panel: FC<PanelProps> = ({
   const isRestoring = useStore(s => s.isRestoring)
   const showWorkflowVersionHistoryPanel = useStore(s => s.showWorkflowVersionHistoryPanel)
 
+  // widths used for adaptive layout
+  const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
+  const previewPanelWidth = useStore(s => s.previewPanelWidth)
+  const setPreviewPanelWidth = useStore(s => s.setPreviewPanelWidth)
+
+  // When a node is selected and the NodePanel appears, if the current width
+  // of preview/otherPanel is too large, it may result in the total width of
+  // the two panels exceeding the workflowCanvasWidth, causing the NodePanel
+  // to be pushed out. Here we check and, if necessary, reduce the previewPanelWidth
+  // to "workflowCanvasWidth - 400 (minimum NodePanel width) - 400 (minimum canvas space)",
+  // while still ensuring that previewPanelWidth ≥ 400.
+
+  useEffect(() => {
+    if (!selectedNode || !workflowCanvasWidth)
+      return
+
+    const reservedCanvasWidth = 400 // Reserve the minimum visible width for the canvas
+    const minNodePanelWidth = 400
+    const maxAllowed = Math.max(workflowCanvasWidth - reservedCanvasWidth - minNodePanelWidth, 400)
+
+    if (previewPanelWidth > maxAllowed)
+      setPreviewPanelWidth(maxAllowed)
+  }, [selectedNode, workflowCanvasWidth, previewPanelWidth, setPreviewPanelWidth])
+
   const setRightPanelWidth = useStore(s => s.setRightPanelWidth)
   const setOtherPanelWidth = useStore(s => s.setOtherPanelWidth)