fix(editor): Fix minor style bugs around parameter input (#19150)

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);

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',

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',

packages/frontend/editor-ui/src/components/FocusPanel.vue

@@ -715,8 +715,8 @@ function onOpenNdv() {
 		}
 
 		.editorContainer {
-			height: 100%;
+			height: 0;
-			overflow-y: auto;
+			flex-grow: 1;
 
 			.editor {
 				display: flex;

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;
 	}
 

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);