From 9031b5840020c77ba807ef24eb3ff0ab93bae720 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 1 Nov 2023 18:10:09 +0100
Subject: [PATCH] fix schema map

---
 .../lib/components/flows/map/FlowErrorHandlerItem.svelte | 7 +++++--
 .../lib/components/flows/map/FlowModuleSchemaMap.svelte  | 9 ++++++---
 .../src/routes/(root)/(logged)/flows/dev/+page.svelte    | 1 +
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
index ad367a14e5..0442f4ac75 100644
--- a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
@@ -10,6 +10,8 @@
 	import type { FlowCopilotContext } from '$lib/components/copilot/flow'
 	import { fade } from 'svelte/transition'
 
+	export let small: boolean
+
 	const { selectedId, flowStateStore, flowStore } =
 		getContext<FlowEditorContext>('FlowEditorContext')
 
@@ -53,10 +55,10 @@
 	class={classNames(
 		'z-10',
 		$copilotCurrentStepStore !== undefined ? 'border-gray-500/75' : 'cursor-pointer',
-		'border transition-colors duration-[400ms] ease-linear mx-auto rounded-sm px-2 py-1 bg-surface text-sm flex justify-between items-center flex-row overflow-x-hidden relative',
+		'border transition-colors duration-[400ms] ease-linear rounded-sm px-2 py-1 bg-surface text-sm flex justify-between items-center flex-row overflow-x-hidden relative',
 		$selectedId?.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
 	)}
-	style="min-width: 275px"
+	style={small ? 'min-width: 200px' : 'min-width: 275px'}
 >
 	{#if $copilotCurrentStepStore !== undefined}
 		<div transition:fade class="absolute inset-0 bg-gray-500 bg-opacity-75 z-[900]" />
@@ -80,6 +82,7 @@
 	</div>
 	<div class="-my-1">
 		<Toggle
+			size={small ? 'xs' : 'sm'}
 			checked={Boolean($flowStore?.value?.failure_module)}
 			on:change={onToggle}
 			id="error-handler-toggle"
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index 657073e094..892ea5b499 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -33,6 +33,7 @@
 	export let disableHeader = false
 	export let disableTutorials = false
 	export let disableAi = false
+	export let smallErrorHandler = false
 
 	let flowTutorials: FlowTutorials | undefined = undefined
 
@@ -202,7 +203,7 @@
 		</div>
 	{/if}
 
-	<div class="flex-auto grow" bind:clientHeight={minHeight}>
+	<div class="z-10 flex-auto grow" bind:clientHeight={minHeight}>
 		<FlowGraph
 			{disableAi}
 			insertable
@@ -286,9 +287,11 @@
 		/>
 	</div>
 	<div
-		class="absolute w-full inline-flex text-sm flex-col gap-2 bottom-0 left-0 flex-initial p-2 items-center border-b"
+		class="z-10 absolute inline-flex w-full text-sm gap-2 bottom-0 left-0 p-2 {smallErrorHandler
+			? 'flex-row-reverse'
+			: 'justify-center'} border-b"
 	>
-		<FlowErrorHandlerItem />
+		<FlowErrorHandlerItem small={smallErrorHandler} />
 	</div>
 </div>
 
diff --git a/frontend/src/routes/(root)/(logged)/flows/dev/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/dev/+page.svelte
index 1c5b59785a..4ffb68ae55 100644
--- a/frontend/src/routes/(root)/(logged)/flows/dev/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/dev/+page.svelte
@@ -207,6 +207,7 @@
 							bind:modules={$flowStore.value.modules}
 							disableAi
 							disableTutorials
+							smallErrorHandler={true}
 						/>
 					{:else}
 						<div class="text-red-400 mt-20">Missing flow modules</div>