fix: Optimize the workspace panel width calculation (#22195)

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)