From 511bd020d143ac67a2ce876e9b718047b900d702 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 14 Nov 2022 11:45:35 +0100
Subject: [PATCH] fix(frontend): Set settings as header and error handler as
 footer (#893)

---
 .../src/lib/components/flows/FlowEditor.svelte |  2 +-
 .../flows/map/FlowErrorHandlerItem.svelte      |  2 +-
 .../flows/map/FlowModuleSchemaMap.svelte       | 18 +++++++++++++-----
 .../flows/map/FlowSettingsItem.svelte          |  2 +-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/flows/FlowEditor.svelte b/frontend/src/lib/components/flows/FlowEditor.svelte
index 9383d81879..b0972cd41a 100644
--- a/frontend/src/lib/components/flows/FlowEditor.svelte
+++ b/frontend/src/lib/components/flows/FlowEditor.svelte
@@ -10,7 +10,7 @@
 <div class="h-full overflow-hidden border-t">
 	<Splitpanes>
 		<Pane size={25} minSize={20} class="h-full">
-			<div class="grow overflow-auto p-4 bg-gray h-full bg-gray-50 relative">
+			<div class="grow overflow-auto bg-gray h-full bg-gray-50 relative">
 				{#if $flowStore.value.modules}
 					<FlowModuleSchemaMap bind:modules={$flowStore.value.modules} root />
 				{/if}
diff --git a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
index 7811cb31ef..37db252ccd 100644
--- a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
@@ -41,7 +41,7 @@
 		}
 	}}
 	class={classNames(
-		'border rounded-md p-2 bg-white text-sm cursor-pointer mt-4 flex flex-col overflow-x-hidden  bottom-0 z-10 sticky',
+		'border rounded-md p-2 bg-white text-sm cursor-pointer flex flex-col overflow-x-hidden ',
 		$selectedId.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
 	)}
 >
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index cb6194162c..3d4d6921fc 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -73,11 +73,17 @@
 	$: confirmationModalOpen = indexToRemove !== undefined
 </script>
 
-<div class="flex flex-col justify-between w-full">
-	<ul class="w-full">
-		{#if root}
+<div class="flex flex-col h-full">
+	{#if root}
+		<div class="flex-initial p-4 border-b">
 			<FlowSettingsItem />
-			<FlowInputsItem />
+		</div>
+	{/if}
+	<ul class="w-full flex-auto relative overflow-y-auto overflow-x-hidden p-4">
+		{#if root}
+			<li>
+				<FlowInputsItem />
+			</li>
 		{/if}
 
 		{#each modules as mod, index (mod.id ?? index)}
@@ -101,7 +107,9 @@
 		<InsertModuleButton on:click={() => insertNewModuleAtIndex(modules.length)} />
 	</ul>
 	{#if root}
-		<FlowErrorHandlerItem />
+		<div class="flex-none p-4 border-t">
+			<FlowErrorHandlerItem />
+		</div>
 	{/if}
 </div>
 
diff --git a/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte b/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte
index 746d0ae6d7..5a63dcb55f 100644
--- a/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte
@@ -9,7 +9,7 @@
 	const { select, selectedId, schedule } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	$: settingsClass = classNames(
-		'border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center mb-4 sticky top-0 z-10',
+		'border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center',
 		$selectedId === 'settings' ? 'outline outline-offset-1 outline-2  outline-slate-900' : ''
 	)
 </script>