From ea6ccae19ec6e8a9064748421dc0bef61303c5f6 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhem@mbp-de-windmill.home>
Date: Tue, 1 Oct 2024 08:51:42 +0200
Subject: [PATCH] improve scroll

---
 .../flows/content/FlowSettings.svelte         | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/flows/content/FlowSettings.svelte b/frontend/src/lib/components/flows/content/FlowSettings.svelte
index 63eaa51a21..a8a94b86a7 100644
--- a/frontend/src/lib/components/flows/content/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSettings.svelte
@@ -3,10 +3,9 @@
 	import { base } from '$lib/base'
 	import Path from '$lib/components/Path.svelte'
 	import FlowCard from '../common/FlowCard.svelte'
-
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { Alert, Button, SecondsInput } from '$lib/components/common'
-	import { getContext } from 'svelte'
+	import { getContext, beforeUpdate, afterUpdate } from 'svelte'
 	import type { FlowEditorContext } from '../types'
 	import Slider from '$lib/components/Slider.svelte'
 	import { enterpriseLicense, workspaceStore } from '$lib/stores'
@@ -37,9 +36,27 @@
 	}
 	let path: Path | undefined = undefined
 	let dirtyPath = false
+
+	let autoscroll = false
+
+	let scrollableDiv: HTMLDivElement | undefined = undefined
+
+	beforeUpdate(() => {
+		if (scrollableDiv) {
+			const scrollableDistance = scrollableDiv.scrollHeight - scrollableDiv.offsetHeight
+			autoscroll = scrollableDiv.scrollTop > scrollableDistance - 20
+			console.log('autoscroll', autoscroll)
+		}
+	})
+
+	afterUpdate(() => {
+		if (autoscroll && scrollableDiv) {
+			scrollableDiv.scrollTo(0, scrollableDiv.scrollHeight)
+		}
+	})
 </script>
 
-<div class="h-full overflow-auto flex flex-col">
+<div class="h-full overflow-auto flex flex-col" bind:this={scrollableDiv}>
 	<FlowCard {noEditor} title="Settings">
 		<div class="grow min-h-0 p-4 h-full flex flex-col gap-4">
 			<!-- Metadata Section -->