From 2b38c4373eb7ce8647a7cb8f8a6e8b555e8ef5fb Mon Sep 17 00:00:00 2001
From: Daria <daria.staferova@n8n.io>
Date: Tue, 23 Sep 2025 16:02:11 +0300
Subject: [PATCH] fix(editor): Fix Code Node "Ask AI" UI issues (no-changelog)
 (#19915)

---
 .../components/CodeNodeEditor/AskAI/AskAI.vue | 51 ++++++++++++-------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue b/packages/frontend/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue
index 48b49abd916..2864c36bc01 100644
--- a/packages/frontend/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue
+++ b/packages/frontend/editor-ui/src/components/CodeNodeEditor/AskAI/AskAI.vue
@@ -262,6 +262,17 @@ onMounted(() => {
 	<div>
 		<p :class="$style.intro" v-text="i18n.baseText('codeNodeEditor.askAi.intro')" />
 		<div :class="$style.inputContainer">
+			<N8nInput
+				v-model="prompt"
+				:class="$style.input"
+				type="textarea"
+				:rows="6"
+				:maxlength="ASK_AI_MAX_PROMPT_LENGTH"
+				:placeholder="i18n.baseText('codeNodeEditor.askAi.placeholder')"
+				data-test-id="ask-ai-prompt-input"
+				:readonly="props.isReadOnly"
+				@input="onPromptInput"
+			/>
 			<div :class="$style.meta">
 				<span
 					v-show="prompt.length > 1"
@@ -275,17 +286,6 @@ onMounted(() => {
 					}}
 				</a>
 			</div>
-			<N8nInput
-				v-model="prompt"
-				:class="$style.input"
-				type="textarea"
-				:rows="6"
-				:maxlength="ASK_AI_MAX_PROMPT_LENGTH"
-				:placeholder="i18n.baseText('codeNodeEditor.askAi.placeholder')"
-				data-test-id="ask-ai-prompt-input"
-				:readonly="props.isReadOnly"
-				@input="onPromptInput"
-			/>
 		</div>
 		<div :class="$style.controls">
 			<div v-if="isLoading" :class="$style.loader">
@@ -357,12 +357,27 @@ onMounted(() => {
 <style module lang="scss">
 .input * {
 	border: 0 !important;
+	border-radius: 0 !important;
 }
 .input textarea {
 	font-size: var(--font-size-2xs);
-	padding-bottom: var(--spacing-2xl);
 	font-family: var(--font-family);
 	resize: none;
+
+	/* Custom scrollbar */
+	&::-webkit-scrollbar {
+		width: 4px;
+	}
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	&::-webkit-scrollbar-thumb {
+		background: var(--color-foreground-base);
+		border-radius: 2px;
+	}
+	&::-webkit-scrollbar-thumb:hover {
+		background: var(--color-foreground-dark);
+	}
 }
 .intro {
 	font-weight: var(--font-weight-bold);
@@ -381,6 +396,9 @@ onMounted(() => {
 	position: relative;
 }
 .help {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4xs);
 	text-decoration: underline;
 	margin-left: auto;
 	color: #909399;
@@ -388,11 +406,10 @@ onMounted(() => {
 .meta {
 	display: flex;
 	justify-content: space-between;
-	position: absolute;
-	bottom: var(--spacing-2xs);
-	left: var(--spacing-xs);
-	right: var(--spacing-xs);
-	z-index: 1;
+	align-items: center;
+	padding: var(--spacing-2xs) var(--spacing-xs);
+	background-color: var(--color-foreground-xlight);
+	border-top: 1px solid var(--border-color-base);
 
 	* {
 		font-size: var(--font-size-2xs);