feat(canvas): improve canvas navigation and prompt panel behavior for better user experience

web/src/components/canvas/canvas-node-prompt-panel.tsx

@@ -81,23 +81,21 @@ export function CanvasNodePromptPanel({ node, isRunning, onPromptChange, onConfi
             onPointerDown={(event) => event.stopPropagation()}
             onWheel={(event) => event.stopPropagation()}
         >
-            <div className="relative">
-                <CanvasPromptChipInput
-                    value={prompt}
-                    references={mentionReferences}
-                    onChange={updatePrompt}
-                    onSubmit={submit}
-                    className="thin-scrollbar h-40 w-full cursor-text resize-none rounded-xl px-3 py-2 pr-10 text-sm leading-5 outline-none"
-                    style={{ background: "transparent", color: theme.node.text }}
-                    placeholder={t(`canvas.promptPanel.${mode === "image" && hasImageContent ? "editImage" : mode === "text" && hasTextContent ? "editText" : mode}`)}
-                />
-                <Tooltip title={t("canvas.promptPanel.expandEditor")}>
-                    <Button type="text" className="absolute right-1 top-1 !h-8 !w-8 !min-w-8 !rounded-full !bg-transparent !p-0" style={{ color: theme.node.text }} icon={<Maximize2 className="size-3.5" />} onClick={openExpandedEditor} aria-label={t("canvas.promptPanel.expandEditor")} />
-                </Tooltip>
-            </div>
+            <CanvasPromptChipInput
+                value={prompt}
+                references={mentionReferences}
+                onChange={updatePrompt}
+                onSubmit={submit}
+                className="thin-scrollbar h-40 w-full cursor-text resize-none rounded-xl px-3 py-2 text-sm leading-5 outline-none"
+                style={{ background: "transparent", color: theme.node.text }}
+                placeholder={t(`canvas.promptPanel.${mode === "image" && hasImageContent ? "editImage" : mode === "text" && hasTextContent ? "editText" : mode}`)}
+            />
 
             <div className="mt-2 flex min-w-0 items-center justify-between gap-2">
                 <div className="flex min-w-0 items-center gap-2">
+                    <Tooltip title={t("canvas.promptPanel.expandEditor")}>
+                        <Button type="text" className="!h-8 !w-8 !min-w-8 shrink-0 !rounded-full !bg-transparent !p-0" style={{ color: theme.node.text }} icon={<Maximize2 className="size-3.5" />} onClick={openExpandedEditor} aria-label={t("canvas.promptPanel.expandEditor")} />
+                    </Tooltip>
                     <CanvasPromptLibrary onSelect={updatePrompt} />
                     {mode === "image" ? (
                         <>

web/src/pages/canvas/project.tsx

@@ -975,6 +975,10 @@ function InfiniteCanvasPage() {
             setContextMenu(null);
             setNodeCreatePosition(null);
             setExpandedImageNodeId(null);
+            setHoveredNodeId(null);
+            setToolbarNodeId(null);
+            setDialogNodeId(null);
+            setEditingNodeId(null);
             if (pendingConnectionCreateRef.current) cancelPendingConnectionCreate();
             if (event.button !== 0) return;