From 346d3b4ba92b15c735508f68a852cd43210a06a7 Mon Sep 17 00:00:00 2001
From: Suguru Inoue <suguru@n8n.io>
Date: Thu, 4 Sep 2025 10:07:14 +0200
Subject: [PATCH] fix(editor): Fix minor style bugs around parameter input
 (#19150)

---
 .../N8nActionToggle/ActionToggle.vue          |  2 ++
 .../src/components/CodeNodeEditor/theme.ts    |  1 +
 .../components/ExpressionEditorModal/theme.ts |  3 +++
 .../editor-ui/src/components/FocusPanel.vue   |  4 ++--
 .../components/InputTriple/InputTriple.vue    | 21 ++++++++++---------
 .../src/components/ParameterOptions.vue       |  3 +++
 6 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.vue b/packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.vue
index cb83c62144..78ee4ef8d9 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.vue
@@ -141,6 +141,8 @@ defineExpose({
 	cursor: pointer;
 	padding: var(--spacing-4xs);
 	border-radius: var(--border-radius-base);
+	display: flex;
+	align-items: center;
 
 	&:hover {
 		color: var(--color-primary);
diff --git a/packages/frontend/editor-ui/src/components/CodeNodeEditor/theme.ts b/packages/frontend/editor-ui/src/components/CodeNodeEditor/theme.ts
index 8b4a47badb..cfb9aad226 100644
--- a/packages/frontend/editor-ui/src/components/CodeNodeEditor/theme.ts
+++ b/packages/frontend/editor-ui/src/components/CodeNodeEditor/theme.ts
@@ -115,6 +115,7 @@ export const codeEditorTheme = ({ isReadOnly, minHeight, maxHeight, rows }: Them
 		'&.cm-editor': {
 			...(isReadOnly ? { backgroundColor: 'var(--color-code-background-readonly)' } : {}),
 			borderColor: 'var(--border-color-base)',
+			overflow: 'hidden',
 		},
 		'&.cm-editor.cm-focused': {
 			outline: 'none',
diff --git a/packages/frontend/editor-ui/src/components/ExpressionEditorModal/theme.ts b/packages/frontend/editor-ui/src/components/ExpressionEditorModal/theme.ts
index a35a18643f..332cbcde34 100644
--- a/packages/frontend/editor-ui/src/components/ExpressionEditorModal/theme.ts
+++ b/packages/frontend/editor-ui/src/components/ExpressionEditorModal/theme.ts
@@ -12,6 +12,9 @@ const commonThemeProps = (isReadOnly = false) => ({
 	'.cm-cursor, .cm-dropCursor': {
 		borderLeftColor: 'var(--color-code-caret)',
 	},
+	'&.cm-editor': {
+		overflow: 'hidden',
+	},
 	'&.cm-focused': {
 		borderColor: 'var(--color-secondary)',
 		outline: '0 !important',
diff --git a/packages/frontend/editor-ui/src/components/FocusPanel.vue b/packages/frontend/editor-ui/src/components/FocusPanel.vue
index 60ee61a013..2148ca2f5c 100644
--- a/packages/frontend/editor-ui/src/components/FocusPanel.vue
+++ b/packages/frontend/editor-ui/src/components/FocusPanel.vue
@@ -715,8 +715,8 @@ function onOpenNdv() {
 		}
 
 		.editorContainer {
-			height: 100%;
-			overflow-y: auto;
+			height: 0;
+			flex-grow: 1;
 
 			.editor {
 				display: flex;
diff --git a/packages/frontend/editor-ui/src/components/InputTriple/InputTriple.vue b/packages/frontend/editor-ui/src/components/InputTriple/InputTriple.vue
index b3a907416d..3dbd1d7c85 100644
--- a/packages/frontend/editor-ui/src/components/InputTriple/InputTriple.vue
+++ b/packages/frontend/editor-ui/src/components/InputTriple/InputTriple.vue
@@ -71,10 +71,16 @@ withDefaults(defineProps<Props>(), { middleWidth: '160px' });
 	flex-shrink: 0;
 	flex-basis: 240px;
 	flex-grow: 1;
+	z-index: 0;
+
 	--input-border-radius: 0;
+
+	&:focus-within {
+		z-index: 1;
+	}
 }
 
-.default .item:not(:first-child):not(:focus-within + .item) {
+.default .item:not(:first-child) {
 	margin-left: -1px;
 }
 
@@ -102,12 +108,10 @@ withDefaults(defineProps<Props>(), { middleWidth: '160px' });
 	flex-wrap: wrap;
 
 	.middle {
+		margin-left: -1px;
+
 		--input-border-top-right-radius: var(--border-radius-base);
 		--input-border-bottom-right-radius: 0;
-
-		&:not(:focus-within + .item) {
-			margin-left: -1px;
-		}
 	}
 
 	.item:first-of-type {
@@ -118,15 +122,12 @@ withDefaults(defineProps<Props>(), { middleWidth: '160px' });
 
 	.item:last-of-type {
 		flex-basis: 400px;
+		margin-top: -1px;
 
 		--input-border-top-left-radius: 0;
 		--input-border-top-right-radius: 0;
 		--input-border-bottom-left-radius: var(--border-radius-base);
 		--input-border-bottom-right-radius: var(--border-radius-base);
-
-		&:not(:focus-within ~ .item) {
-			margin-top: -1px;
-		}
 	}
 }
 
@@ -149,7 +150,7 @@ withDefaults(defineProps<Props>(), { middleWidth: '160px' });
 		--input-border-bottom-right-radius: 0;
 	}
 
-	.item:not(:first-of-type):not(:focus-within + .item) {
+	.item:not(:first-of-type) {
 		margin-top: -1px;
 	}
 
diff --git a/packages/frontend/editor-ui/src/components/ParameterOptions.vue b/packages/frontend/editor-ui/src/components/ParameterOptions.vue
index b436c5668e..337d2364c3 100644
--- a/packages/frontend/editor-ui/src/components/ParameterOptions.vue
+++ b/packages/frontend/editor-ui/src/components/ParameterOptions.vue
@@ -233,6 +233,9 @@ $container-height: 22px;
 }
 
 .focusButton {
+	outline: none;
+	color: var(--color-text-light);
+
 	&:hover {
 		cursor: pointer;
 		color: var(--color-primary);