From 80be9be5a7625cf58759420bf47c7654aed9c41a Mon Sep 17 00:00:00 2001
From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
Date: Wed, 29 Oct 2025 22:02:36 +0100
Subject: [PATCH] Fix scrollbars due to AIChatLayout (#6989)

* Fix annoying scrollbar due to AIChatLayout

* nit animated pane

* don't kill AI Chat Manager on pane close

* button shrink 0
---
 .../components/common/button/Button.svelte    |  1 +
 .../lib/components/copilot/chat/AIChat.svelte | 14 ++--------
 .../copilot/chat/AiChatLayout.svelte          | 28 +++++++++++++------
 .../components/splitPanes/AnimatedPane.svelte | 14 +++++-----
 4 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index 4e5f0de70b..c4f6562430 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -307,6 +307,7 @@
 <div
 	class={twMerge(
 		dropdownItems && dropdownItems.length > 0 ? dividerClass : '',
+		'shrink-0',
 		wrapperClasses,
 		'flex flex-row rounded-md',
 		disabled ? 'divide-text-disabled cursor-not-allowed' : ''
diff --git a/frontend/src/lib/components/copilot/chat/AIChat.svelte b/frontend/src/lib/components/copilot/chat/AIChat.svelte
index 38c191e0d1..9e41034fbe 100644
--- a/frontend/src/lib/components/copilot/chat/AIChat.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChat.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import AIChatDisplay from './AIChatDisplay.svelte'
-	import { onDestroy, untrack } from 'svelte'
+	import { untrack } from 'svelte'
 	import { type ScriptLang } from '$lib/gen'
 	import { dbSchemas, userStore, workspaceStore } from '$lib/stores'
 	import { aiChatManager, AIMode } from './AIChatManager.svelte'
@@ -53,17 +53,7 @@
 		aiChatManager.sendRequest(options)
 	}
 
-	function cancel() {
-		aiChatManager.cancel()
-	}
-
 	const historyManager = aiChatManager.historyManager
-	historyManager.init()
-
-	onDestroy(() => {
-		cancel()
-		historyManager.close()
-	})
 
 	let aiChatDisplay: AIChatDisplay | undefined = $state(undefined)
 
@@ -128,7 +118,7 @@
 	loadPastChat={(id) => {
 		aiChatManager.loadPastChat(id)
 	}}
-	{cancel}
+	cancel={aiChatManager.cancel}
 	askAi={aiChatManager.askAi}
 	{headerLeft}
 	hasDiff={aiChatManager.scriptEditorOptions &&
diff --git a/frontend/src/lib/components/copilot/chat/AiChatLayout.svelte b/frontend/src/lib/components/copilot/chat/AiChatLayout.svelte
index f258d96967..f45c928169 100644
--- a/frontend/src/lib/components/copilot/chat/AiChatLayout.svelte
+++ b/frontend/src/lib/components/copilot/chat/AiChatLayout.svelte
@@ -6,6 +6,8 @@
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { chatState } from './sharedChatState.svelte'
 	import { loadCopilot } from '$lib/aiStore'
+	import { aiChatManager } from './AIChatManager.svelte'
+	import { onDestroy } from 'svelte'
 
 	interface Props {
 		noPadding?: boolean
@@ -33,11 +35,19 @@
 			loadCopilot($workspaceStore)
 		}
 	})
+
+	const historyManager = aiChatManager.historyManager
+	historyManager.init()
+
+	onDestroy(() => {
+		aiChatManager.cancel()
+		historyManager.close()
+	})
 </script>
 
 {#if !disableAi}
 	<Splitpanes horizontal={false} class="flex-1 min-h-0">
-		<Pane size={99.8 - chatState.size} minSize={50} class="flex flex-col min-h-0">
+		<Pane size={100 - chatState.size} minSize={50} class="flex flex-col min-h-0">
 			<div
 				id="content"
 				class={classNames(
@@ -86,13 +96,15 @@
 				</main>
 			</div>
 		</Pane>
-		<Pane
-			bind:size={chatState.size}
-			minSize={15}
-			class={`flex flex-col min-h-0 z-[${zIndexes.aiChat}]`}
-		>
-			<AiChat />
-		</Pane>
+		{#if chatState.size > 1}
+			<Pane
+				bind:size={chatState.size}
+				minSize={15}
+				class={`flex flex-col min-h-0 z-[${zIndexes.aiChat}]`}
+			>
+				<AiChat />
+			</Pane>
+		{/if}
 	</Splitpanes>
 {:else}
 	{@render children?.()}
diff --git a/frontend/src/lib/components/splitPanes/AnimatedPane.svelte b/frontend/src/lib/components/splitPanes/AnimatedPane.svelte
index d4f19471e9..1d62dc3c7a 100644
--- a/frontend/src/lib/components/splitPanes/AnimatedPane.svelte
+++ b/frontend/src/lib/components/splitPanes/AnimatedPane.svelte
@@ -6,7 +6,7 @@
 	let {
 		duration = 300,
 		easing = cubicOut,
-		size,
+		size = $bindable(),
 		opened,
 		children,
 		...props
@@ -18,10 +18,8 @@
 		size: number
 	} = $props()
 
-	let userChangedSize: number | undefined = $state(undefined)
-
 	let t = $state(opened ? 1 : 0)
-	let computedSize = $derived((opened ? easing(t) : 1 - easing(1 - t)) * (userChangedSize ?? size))
+	let computedSize = $derived((opened ? easing(t) : 1 - easing(1 - t)) * size)
 
 	let lastTValue = 0
 	let loopIsRunning = false
@@ -52,6 +50,8 @@
 	})
 </script>
 
-<Pane {...props} bind:size={() => computedSize, (v) => (userChangedSize = v)}>
-	{@render children()}
-</Pane>
+{#if computedSize > 1}
+	<Pane {...props} bind:size={() => computedSize, (v) => (size = v)}>
+		{@render children()}
+	</Pane>
+{/if}