From a0544ae666dee8d53f58c56bd384ec93f0e7c5b6 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Mon, 18 Nov 2024 14:27:26 +0100
Subject: [PATCH] fix AI assistant chat and e2e test

---
 cypress/e2e/45-ai-assistant.cy.ts                 |  2 ++
 .../AskAssistantChat/AskAssistantChat.vue         | 15 +++++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/cypress/e2e/45-ai-assistant.cy.ts b/cypress/e2e/45-ai-assistant.cy.ts
index 9b50fef44a0df..9d3381136327b 100644
--- a/cypress/e2e/45-ai-assistant.cy.ts
+++ b/cypress/e2e/45-ai-assistant.cy.ts
@@ -557,6 +557,8 @@ describe('General help', () => {
 		}).as('chatRequest');
 
 		aiAssistant.getters.askAssistantFloatingButton().click();
+		wf.getters.zoomToFitButton().click();
+
 		aiAssistant.actions.sendMessage('What is wrong with this workflow?');
 		cy.wait('@chatRequest');
 
diff --git a/packages/design-system/src/components/AskAssistantChat/AskAssistantChat.vue b/packages/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
index 3cd62205f680a..710a8a07d7dac 100644
--- a/packages/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
+++ b/packages/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
@@ -344,6 +344,8 @@ async function onCopyButtonClick(content: string, e: MouseEvent) {
 .container {
 	height: 100%;
 	position: relative;
+	display: grid;
+	grid-template-rows: auto 1fr auto;
 }
 
 p {
@@ -373,10 +375,6 @@ p {
 	background-color: var(--color-background-light);
 	border: var(--border-base);
 	border-top: 0;
-	height: 100%;
-	overflow-x: hidden;
-	overflow-y: auto;
-	padding-bottom: 250px; // make scrollable at the end
 	position: relative;
 
 	pre,
@@ -390,7 +388,13 @@ p {
 }
 
 .messages {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
 	padding: var(--spacing-xs);
+	overflow-y: auto;
 
 	& + & {
 		padding-top: 0;
@@ -533,13 +537,12 @@ code[class^='language-'] {
 }
 
 .inputWrapper {
-	position: absolute;
 	display: flex;
-	bottom: 0;
 	background-color: var(--color-foreground-xlight);
 	border: var(--border-base);
 	width: 100%;
 	padding-top: 1px;
+	overflow: hidden;
 
 	textarea {
 		border: none;