From c1aae67a04c7ea3994b8f64d7866c56f7b49ce69 Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Tue, 22 Jul 2025 10:44:57 +0200
Subject: [PATCH] fix(editor): Don't hide FocusPanel when NodeCreator is opened
 to avoid canvas shift (no-changelog) (#17454)

---
 .../editor-ui/src/components/FocusPanel.vue   |  3 +--
 .../Node/NodeCreator/NodeCreator.vue          |  3 +++
 .../editor-ui/src/composables/useStyles.ts    |  2 +-
 .../editor-ui/src/stores/focusPanel.store.ts  | 19 ++-----------------
 .../frontend/editor-ui/src/views/NodeView.vue | 12 ------------
 5 files changed, 7 insertions(+), 32 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/FocusPanel.vue b/packages/frontend/editor-ui/src/components/FocusPanel.vue
index a1b99383b6..a198c72833 100644
--- a/packages/frontend/editor-ui/src/components/FocusPanel.vue
+++ b/packages/frontend/editor-ui/src/components/FocusPanel.vue
@@ -67,7 +67,6 @@ const resolvedParameter = computed(() =>
 );
 
 const focusPanelActive = computed(() => focusPanelStore.focusPanelActive);
-const focusPanelHidden = computed(() => focusPanelStore.focusPanelHidden);
 const focusPanelWidth = computed(() => focusPanelStore.focusPanelWidth);
 
 const isDisabled = computed(() => {
@@ -314,7 +313,7 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
 </script>
 
 <template>
-	<div v-if="focusPanelActive" v-show="!focusPanelHidden" :class="$style.wrapper" @keydown.stop>
+	<div v-if="focusPanelActive" :class="$style.wrapper" @keydown.stop>
 		<N8nResizeWrapper
 			:width="focusPanelWidth"
 			:supported-directions="['left']"
diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
index a3e0dfc004..fede3fe570 100644
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
@@ -16,6 +16,7 @@ import { useAssistantStore } from '@/stores/assistant.store';
 import N8nIconButton from '@n8n/design-system/components/N8nIconButton/IconButton.vue';
 import { useBuilderStore } from '@/stores/builder.store';
 import type { NodeTypeSelectedPayload } from '@/Interface';
+import { onClickOutside } from '@vueuse/core';
 
 export interface Props {
 	active?: boolean;
@@ -151,6 +152,8 @@ const { nodeCreator } = toRefs(state);
 onBeforeUnmount(() => {
 	unBindOnMouseUpOutside();
 });
+
+onClickOutside(nodeCreator, () => emit('closeNodeCreator'));
 </script>
 
 <template>
diff --git a/packages/frontend/editor-ui/src/composables/useStyles.ts b/packages/frontend/editor-ui/src/composables/useStyles.ts
index 0ad31d45b4..6a1c5c6726 100644
--- a/packages/frontend/editor-ui/src/composables/useStyles.ts
+++ b/packages/frontend/editor-ui/src/composables/useStyles.ts
@@ -3,12 +3,12 @@ const APP_Z_INDEXES = {
 	APP_HEADER: 99,
 	SELECT_BOX: 100,
 	CANVAS_ADD_BUTTON: 101,
-	NODE_CREATOR: 200,
 	ASK_ASSISTANT_CHAT: 300,
 	APP_SIDEBAR: 999,
 	CANVAS_SELECT_BOX: 100,
 	TOP_BANNERS: 999,
 	FOCUS_PANEL: 1600,
+	NODE_CREATOR: 1700,
 	NDV: 1800,
 	MODALS: 2000,
 	TOASTS: 2100,
diff --git a/packages/frontend/editor-ui/src/stores/focusPanel.store.ts b/packages/frontend/editor-ui/src/stores/focusPanel.store.ts
index 0335db8dd8..3ea132970c 100644
--- a/packages/frontend/editor-ui/src/stores/focusPanel.store.ts
+++ b/packages/frontend/editor-ui/src/stores/focusPanel.store.ts
@@ -14,7 +14,8 @@ import { LOCAL_STORAGE_FOCUS_PANEL, PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/cons
 import { useStorage } from '@/composables/useStorage';
 import { watchOnce } from '@vueuse/core';
 
-const DEFAULT_PANEL_WIDTH = 528;
+// matches NodeCreator to ensure they fully overlap by default when both are open
+const DEFAULT_PANEL_WIDTH = 385;
 
 type FocusedNodeParameter = {
 	nodeId: string;
@@ -59,7 +60,6 @@ export const useFocusPanelStore = defineStore(STORES.FOCUS_PANEL, () => {
 	const lastFocusTimestamp = ref(0);
 
 	const focusPanelActive = computed(() => currentFocusPanelData.value.isActive);
-	const focusPanelHidden = ref(false);
 	const focusPanelWidth = computed(() => currentFocusPanelData.value.width ?? DEFAULT_PANEL_WIDTH);
 	const _focusedNodeParameters = computed(() => currentFocusPanelData.value.parameters);
 
@@ -109,11 +109,6 @@ export const useFocusPanelStore = defineStore(STORES.FOCUS_PANEL, () => {
 		if (isActive) {
 			lastFocusTimestamp.value = Date.now();
 		}
-
-		// Unhide the focus panel if it was hidden
-		if (focusPanelHidden.value && focusPanelActive.value) {
-			focusPanelHidden.value = false;
-		}
 	}
 
 	// When a new workflow is saved, we should update the focus panel data with the new workflow ID
@@ -143,14 +138,6 @@ export const useFocusPanelStore = defineStore(STORES.FOCUS_PANEL, () => {
 		_setOptions({ isActive: false });
 	}
 
-	function hideFocusPanel(hide: boolean = true) {
-		if (focusPanelHidden.value === hide) {
-			return;
-		}
-
-		focusPanelHidden.value = hide;
-	}
-
 	function toggleFocusPanel() {
 		_setOptions({ isActive: !focusPanelActive.value });
 	}
@@ -179,11 +166,9 @@ export const useFocusPanelStore = defineStore(STORES.FOCUS_PANEL, () => {
 		focusPanelActive,
 		focusedNodeParameters,
 		lastFocusTimestamp,
-		focusPanelHidden,
 		focusPanelWidth,
 		openWithFocusedNodeParameter,
 		isRichParameter,
-		hideFocusPanel,
 		closeFocusPanel,
 		toggleFocusPanel,
 		onNewWorkflowSave,
diff --git a/packages/frontend/editor-ui/src/views/NodeView.vue b/packages/frontend/editor-ui/src/views/NodeView.vue
index 6ea21871a0..7ddd7b8f9f 100644
--- a/packages/frontend/editor-ui/src/views/NodeView.vue
+++ b/packages/frontend/editor-ui/src/views/NodeView.vue
@@ -981,10 +981,6 @@ function onUpdateNodeOutputs(id: string) {
 }
 
 function onClickNodeAdd(source: string, sourceHandle: string) {
-	if (isFocusPanelFeatureEnabled.value && focusPanelStore.focusPanelActive) {
-		focusPanelStore.hideFocusPanel();
-	}
-
 	nodeCreatorStore.openNodeCreatorForConnectingNode({
 		connection: {
 			source,
@@ -1218,10 +1214,6 @@ function onOpenSelectiveNodeCreator(
 function onToggleNodeCreator(options: ToggleNodeCreatorOptions) {
 	nodeCreatorStore.setNodeCreatorState(options);
 
-	if (isFocusPanelFeatureEnabled.value && focusPanelStore.focusPanelActive) {
-		focusPanelStore.hideFocusPanel(options.createNodeActive);
-	}
-
 	if (!options.createNodeActive && !options.hasAddedNodes) {
 		uiStore.resetLastInteractedWith();
 	}
@@ -1246,10 +1238,6 @@ function onToggleFocusPanel() {
 function closeNodeCreator() {
 	if (nodeCreatorStore.isCreateNodeActive) {
 		nodeCreatorStore.isCreateNodeActive = false;
-
-		if (isFocusPanelFeatureEnabled.value && focusPanelStore.focusPanelActive) {
-			focusPanelStore.hideFocusPanel(false);
-		}
 	}
 }