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

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

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 &&

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?.()}

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}