From 58194521b12f121b802428eb4e39b5d879f52f4a Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 8 Nov 2024 19:35:21 +0100
Subject: [PATCH] nit right panel flow props

---
 .../flows/content/FlowModuleComponent.svelte  |  2 +-
 .../propertyPicker/PropPicker.svelte          | 20 ++++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index 35a8585af1..6eee352cc9 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -378,7 +378,7 @@
 							class={advancedSelected === 'runtime' ? 'h-[calc(100%-68px)]' : 'h-[calc(100%-34px)]'}
 						>
 							{#if selected === 'inputs' && (flowModule.value.type == 'rawscript' || flowModule.value.type == 'script' || flowModule.value.type == 'flow')}
-								<div class="h-full overflow-auto px-2 bg-surface" id="flow-editor-step-input">
+								<div class="h-full overflow-auto bg-surface" id="flow-editor-step-input">
 									<PropPickerWrapper
 										pickableProperties={stepPropPicker.pickableProperties}
 										error={failureModule}
diff --git a/frontend/src/lib/components/propertyPicker/PropPicker.svelte b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
index a83952578c..54946f627d 100644
--- a/frontend/src/lib/components/propertyPicker/PropPicker.svelte
+++ b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
@@ -11,6 +11,7 @@
 	import ClearableInput from '../common/clearableInput/ClearableInput.svelte'
 	import { filterNestedObject } from '../flows/previousResults'
 	import type { PropPickerContext } from '../prop_picker'
+	import Scrollable from '../Scrollable.svelte'
 
 	export let pickableProperties: PickableProperties
 	export let displayContext = true
@@ -191,14 +192,18 @@
 	$: search, $inputMatches, $propPickerConfig, updateState()
 </script>
 
-<div class="flex flex-col h-full rounded overflow-hidden">
-	<div class="px-2 py-2">
+<div class="flex flex-col h-full rounded">
+	<div class="px-1 py-2">
 		<ClearableInput bind:value={search} placeholder="Search prop..." />
 	</div>
-	<div
-		class="overflow-y-auto px-2 pt-2 grow relative"
-		class:bg-surface-secondary={!$propPickerConfig && !alwaysOn}
-	>
+	<!-- <div
+	class="px-2 pt-2 grow relative"
+	class:bg-surface-secondary={!$propPickerConfig && !alwaysOn} -->
+	<Scrollable scrollableClass="grow relative min-h-0 px-1 py-1 shrink ">
+		<!-- <div
+			class="px-2 pt-2 grow relative"
+			class:bg-surface-secondary={!$propPickerConfig && !alwaysOn}
+		> -->
 		<!-- <pre class="text-2xs w-full"
 			>{JSON.stringify({ pickableProperties, resultByIdFiltered }, null, 2)}</pre
 		> -->
@@ -399,5 +404,6 @@
 				</div>
 			{/if}
 		{/if}
-	</div>
+		<!-- </div> -->
+	</Scrollable>
 </div>