From bb3cea9f5c41e414c177f2d67afa591632d65327 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 1 Nov 2023 17:54:00 +0100
Subject: [PATCH] fix: improve rendering of list with undefined heights

---
 .../components/apps/components/layout/AppList.svelte   | 10 +++++++---
 .../components/flows/map/FlowErrorHandlerItem.svelte   |  2 ++
 .../components/flows/map/FlowModuleSchemaMap.svelte    |  2 +-
 frontend/src/lib/components/flows/map/MapItem.svelte   |  4 ++--
 .../src/lib/components/flows/map/VirtualItem.svelte    |  2 +-
 .../src/routes/(root)/(logged)/flows/dev/+page.svelte  | 10 +++-------
 6 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppList.svelte b/frontend/src/lib/components/apps/components/layout/AppList.svelte
index dd93ad7355..42dc6ac607 100644
--- a/frontend/src/lib/components/apps/components/layout/AppList.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppList.svelte
@@ -162,9 +162,13 @@
 								  } max-height: ${resolvedConfig.heightPx}px;`
 								: ''}
 							class={inRange
-								? `${$allIdsInPath.includes(id) ? 'overflow-visible' : 'overflow-auto'} ${
-										!isCard ? 'w-full' : resolvedConfig?.displayBorders ? 'border' : ''
-								  }`
+								? `${
+										$allIdsInPath.includes(id)
+											? 'overflow-visible'
+											: resolvedConfig.heightPx
+											? 'overflow-auto'
+											: ''
+								  } ${!isCard ? 'w-full' : resolvedConfig?.displayBorders ? 'border' : ''}`
 								: 'h-0 float overflow-hidden invisible absolute'}
 						>
 							<ListWrapper
diff --git a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
index fa3c060c2d..ad367a14e5 100644
--- a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
@@ -40,6 +40,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	on:click={() => {
 		if ($copilotCurrentStepStore !== undefined) return
@@ -50,6 +51,7 @@
 		}
 	}}
 	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',
 		$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 c38792ad87..657073e094 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -286,7 +286,7 @@
 		/>
 	</div>
 	<div
-		class="z-10 absolute w-full inline-flex flex-col gap-2 bottom-0 left-0 flex-initial p-2 items-center border-b"
+		class="absolute w-full inline-flex text-sm flex-col gap-2 bottom-0 left-0 flex-initial p-2 items-center border-b"
 	>
 		<FlowErrorHandlerItem />
 	</div>
diff --git a/frontend/src/lib/components/flows/map/MapItem.svelte b/frontend/src/lib/components/flows/map/MapItem.svelte
index d4ddbf7a35..041ed0a55e 100644
--- a/frontend/src/lib/components/flows/map/MapItem.svelte
+++ b/frontend/src/lib/components/flows/map/MapItem.svelte
@@ -61,7 +61,7 @@
 {#if mod}
 	{#if insertable}
 		<div
-			class="{openMenu ? 'z-10' : ''} w-7 absolute -top-9 left-[50%] right-[50%] -translate-x-1/2"
+			class="{openMenu ? 'z-20' : ''} w-7 absolute -top-9 left-[50%] right-[50%] -translate-x-1/2"
 		>
 			{#if moving}
 				<button
@@ -203,7 +203,7 @@
 	</div>
 	{#if insertable && insertableEnd}
 		<div
-			class="{openMenu2 ? 'z-10' : ''} w-7 absolute top-11 left-[50%] right-[50%] -translate-x-1/2"
+			class="{openMenu2 ? 'z-20' : ''} w-7 absolute top-11 left-[50%] right-[50%] -translate-x-1/2"
 		>
 			{#if moving}
 				<button
diff --git a/frontend/src/lib/components/flows/map/VirtualItem.svelte b/frontend/src/lib/components/flows/map/VirtualItem.svelte
index 40295eff47..7c349608c1 100644
--- a/frontend/src/lib/components/flows/map/VirtualItem.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItem.svelte
@@ -101,7 +101,7 @@
 
 {#if insertable && modules && (label != 'Input' || modules.length == 0)}
 	<div
-		class="{openMenu ? 'z-10' : ''} w-7 absolute {whereInsert == 'after'
+		class="{openMenu ? 'z-20' : ''} w-7 absolute {whereInsert == 'after'
 			? 'top-12'
 			: '-top-10'} left-[50%] right-[50%] -translate-x-1/2"
 	>
diff --git a/frontend/src/routes/(root)/(logged)/flows/dev/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/dev/+page.svelte
index 33c5ddae65..1c5b59785a 100644
--- a/frontend/src/routes/(root)/(logged)/flows/dev/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/dev/+page.svelte
@@ -8,7 +8,7 @@
 	import FlowPreviewButtons from '$lib/components/flows/header/FlowPreviewButtons.svelte'
 	import type { FlowEditorContext } from '$lib/components/flows/types'
 	import { writable } from 'svelte/store'
-	import type { Flow, FlowModule, Job } from '$lib/gen'
+	import type { FlowModule, Job, OpenFlow } from '$lib/gen'
 	import { initHistory } from '$lib/history'
 	import type { FlowState } from '$lib/components/flows/flowState'
 	import FlowModuleSchemaMap from '$lib/components/flows/map/FlowModuleSchemaMap.svelte'
@@ -22,15 +22,11 @@
 	let testJob: Job | undefined
 
 	const flowStore = writable({
-		path: '',
 		summary: '',
 		value: { modules: [] },
-		edited_by: '',
-		edited_at: '',
-		archived: false,
 		extra_perms: {},
 		schema: emptySchema()
-	} as Flow)
+	} as OpenFlow)
 
 	let initialCode = JSON.stringify($flowStore, null, 4)
 	const flowStateStore = writable({} as FlowState)
@@ -172,7 +168,7 @@
 
 	$: updateCode(editor, $flowStore)
 
-	function updateCode(editor: SimpleEditor, flow: Flow) {
+	function updateCode(editor: SimpleEditor, flow: OpenFlow) {
 		if (editor && !deepEqual(flow, JSON.parse(editor.getCode()))) {
 			editor.setCode(JSON.stringify(flow, null, 4))
 		}