From 8475e3174084fdf00d20f29fde06eae8b1272272 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 27 Oct 2022 18:50:32 +0200
Subject: [PATCH] UX flow improvements + fix collecting results for loops in
 frontend + fix Identity behavior in backend

---
 backend/src/worker_flow.rs                    |  8 +++
 frontend/src/lib/components/ArgInput.svelte   |  4 +-
 .../src/lib/components/CenteredPage.svelte    |  2 +-
 frontend/src/lib/components/EditorBar.svelte  |  4 ++
 .../src/lib/components/FlowBuilder.svelte     |  4 +-
 .../lib/components/FlowPreviewContent.svelte  |  7 ++-
 .../lib/components/FlowStatusViewer.svelte    | 30 +++++++---
 frontend/src/lib/components/Path.svelte       |  7 +++
 .../src/lib/components/ScriptBuilder.svelte   | 59 ++++++++++---------
 .../src/lib/components/ScriptEditor.svelte    | 51 ++++++++--------
 .../src/lib/components/ScriptSchema.svelte    | 19 +++---
 frontend/src/lib/components/Tooltip.svelte    |  6 +-
 .../common/breadcrumb/Breadcrumb.svelte       |  2 +-
 .../lib/components/common/tabs/Tabs.svelte    |  2 +-
 .../flows/content/FlowModuleComponent.svelte  | 38 ++++--------
 .../flows/content/FlowModuleHeader.svelte     | 11 ++--
 .../lib/components/flows/map/MapItem.svelte   |  2 +-
 .../lib/components/flows/previousResults.ts   |  4 +-
 .../components/sidebar/SidebarContent.svelte  | 15 +----
 frontend/src/routes/run/[...run].svelte       |  2 +-
 20 files changed, 147 insertions(+), 130 deletions(-)

diff --git a/backend/src/worker_flow.rs b/backend/src/worker_flow.rs
index fa8f547ec6..531651b928 100644
--- a/backend/src/worker_flow.rs
+++ b/backend/src/worker_flow.rs
@@ -1048,6 +1048,14 @@ async fn push_next_flow_job(
             )
             .await?
         }
+        FlowModuleValue::Identity => match last_result.clone() {
+            Value::Object(m) => m,
+            v @ _ => {
+                let mut m = Map::new();
+                m.insert("previous_result".to_string(), v);
+                m
+            }
+        },
         _ => {
             /* embedded flow input is augmented with embedding flow input */
             if let Some(value) = &flow_job.args {
diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index f159ad8526..d28f9e1176 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { slide } from 'svelte/transition'
-
 	import { faChevronDown, faChevronUp, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons'
 
 	import { setInputCat as computeInputCat, type InputCat } from '$lib/utils'
@@ -155,7 +153,7 @@
 				</span>
 
 				{#if seeEditable}
-					<div transition:slide class="mt-2">
+					<div class="mt-2">
 						<label class="text-gray-700">
 							Description
 							<textarea rows="1" bind:value={description} placeholder="Edit description" />
diff --git a/frontend/src/lib/components/CenteredPage.svelte b/frontend/src/lib/components/CenteredPage.svelte
index 2f76d7bf70..4769fef99e 100644
--- a/frontend/src/lib/components/CenteredPage.svelte
+++ b/frontend/src/lib/components/CenteredPage.svelte
@@ -1,4 +1,4 @@
-<div class="py-6">
+<div class="pb-6">
 	<div class="max-w-6xl mx-auto px-4 sm:px-6 md:px-8">
 		<slot />
 	</div>
diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
index 11606c5f6a..a6185491e9 100644
--- a/frontend/src/lib/components/EditorBar.svelte
+++ b/frontend/src/lib/components/EditorBar.svelte
@@ -1,3 +1,7 @@
+<script context="module" lang="ts">
+	export const EDITOR_BAR_WIDTH_THRESHOLD = 1044
+</script>
+
 <script lang="ts">
 	import { ResourceService, ScriptService, VariableService } from '$lib/gen'
 	import { getScriptByPath, loadHubScripts, sendUserToast } from '$lib/utils'
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index d98d227b0a..736dfbdc8c 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -162,7 +162,9 @@
 
 <div class="flex flex-col flex-1 h-full">
 	<!-- Nav between steps-->
-	<div class="justify-between flex flex-row w-full my-2 px-4 space-x-4 h-10">
+	<div
+		class="justify-between flex flex-row w-full my-2 px-4 space-x-4 h-10 overflow-x-auto scrollbar-hidden"
+	>
 		<div id="flow_title" class="flex justify-between items-center">
 			<button class="flex flex-row items-center w-full h-full" on:click={() => select('settings')}>
 				<span class="font-mono text-sm"> {$flowStore.path}</span>
diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte
index 3424cf94f0..7f0222797c 100644
--- a/frontend/src/lib/components/FlowPreviewContent.svelte
+++ b/frontend/src/lib/components/FlowPreviewContent.svelte
@@ -10,6 +10,7 @@
 	import { runFlowPreview } from './flows/utils'
 	import SchemaForm from './SchemaForm.svelte'
 	import FlowStatusViewer from '../components/FlowStatusViewer.svelte'
+	import { flowStateStore } from './flows/flowState'
 
 	export let previewMode: 'upTo' | 'whole'
 	export let open: boolean
@@ -160,7 +161,11 @@
 
 	<div class="h-full overflow-y-auto mb-16 grow">
 		{#if jobId}
-			<FlowStatusViewer {jobId} on:jobsLoaded={(e) => onJobsLoaded(e.detail)} />
+			<FlowStatusViewer
+				flowState={$flowStateStore}
+				{jobId}
+				on:jobsLoaded={(e) => onJobsLoaded(e.detail)}
+			/>
 		{/if}
 	</div>
 </div>
diff --git a/frontend/src/lib/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte
index add15e0dcc..978fdb7350 100644
--- a/frontend/src/lib/components/FlowStatusViewer.svelte
+++ b/frontend/src/lib/components/FlowStatusViewer.svelte
@@ -7,13 +7,14 @@
 	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher } from 'svelte'
 	import { onDestroy } from 'svelte'
-	import { flowStateStore } from './flows/flowState'
-	import Button from './common/button/Button.svelte'
+	import type { FlowState } from './flows/flowState'
+	import { Button } from './common'
 
 	const dispatch = createEventDispatcher()
 
 	export let jobId: string
 
+	export let flowState: FlowState | undefined = undefined
 	export let flowJobIds:
 		| {
 				moduleId: string
@@ -84,7 +85,7 @@
 						}
 					}}
 				>
-					#{j}: {loopJobId}
+					#{j + 1}: {loopJobId}
 
 					<Icon
 						class="ml-2"
@@ -94,11 +95,21 @@
 				</Button>
 				<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
 					<svelte:self
+						{flowState}
 						jobId={loopJobId}
 						on:jobsLoaded={(e) => {
+							console.log('loop')
 							if (flowJobIds?.moduleId) {
-								$flowStateStore[flowJobIds.moduleId].previewResult = e.detail.result
-								$flowStateStore[flowJobIds.moduleId].previewArgs = e.detail.args
+								if (flowState) {
+									if (
+										!flowState[flowJobIds.moduleId].previewResult ||
+										!Array.isArray(flowState[flowJobIds.moduleId].previewResult)
+									) {
+										flowState[flowJobIds.moduleId].previewResult = []
+									}
+									flowState[flowJobIds.moduleId].previewResult[j] = e.detail.result
+									flowState[flowJobIds.moduleId].previewArgs = e.detail.args
+								}
 							}
 						}}
 					/>
@@ -132,6 +143,7 @@
 					<li class="w-full border p-6 space-y-2">
 						{#if [FlowStatusModule.type.IN_PROGRESS, FlowStatusModule.type.SUCCESS, FlowStatusModule.type.FAILURE].includes(mod.type)}
 							<svelte:self
+								{flowState}
 								jobId={mod.job}
 								flowJobIds={mod.flow_jobs
 									? {
@@ -140,9 +152,11 @@
 									  }
 									: undefined}
 								on:jobsLoaded={(e) => {
-									if (mod.id) {
-										$flowStateStore[mod.id].previewResult = e.detail.result
-										$flowStateStore[mod.id].previewArgs = e.detail.args
+									if (mod.id && (mod.flow_jobs ?? []).length == 0) {
+										if (flowState) {
+											flowState[mod.id].previewResult = e.detail.result
+											flowState[mod.id].previewArgs = e.detail.args
+										}
 									}
 								}}
 							/>
diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index b1f5571c91..fd8748996c 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -29,6 +29,8 @@
 
 	export let kind: PathKind
 
+	let inputP: HTMLInputElement | undefined = undefined
+
 	const dispatch = createEventDispatcher()
 
 	let groups: Group[] = []
@@ -43,6 +45,10 @@
 		return path
 	}
 
+	export function focus() {
+		inputP?.focus()
+	}
+
 	function handleKeyUp(event: KeyboardEvent) {
 		const key = event.key
 
@@ -200,6 +206,7 @@
 			</span>
 			<input
 				autofocus
+				bind:this={inputP}
 				autocomplete="off"
 				on:keyup={handleKeyUp}
 				bind:value={meta.name}
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 66788433e1..16ae56c776 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -29,6 +29,9 @@
 
 	let pathError = ''
 
+	let summaryC: HTMLTextAreaElement | undefined = undefined
+	let pathC: Path | undefined = undefined
+
 	$: setQueryWithoutLoad($page.url, 'state', encodeState(script))
 	$: step = Number($page.url.searchParams.get('step')) || 1
 
@@ -101,7 +104,10 @@
 					variant="contained"
 					color="light"
 					size="xs"
-					on:click={() => changeStep(1)}
+					on:click={async () => {
+						await changeStep(1)
+						setTimeout(() => pathC?.focus(), 100)
+					}}
 				>
 					{script.path}
 				</Button>
@@ -111,7 +117,10 @@
 					variant="contained"
 					color="light"
 					size="xs"
-					on:click={() => changeStep(1)}
+					on:click={async () => {
+						await changeStep(1)
+						setTimeout(() => summaryC?.focus(), 100)
+					}}
 				>
 					<div class="max-w-[10em] !truncate">
 						{script.summary == '' || !script.summary ? 'No summary' : script.summary}
@@ -119,10 +128,26 @@
 				</Button>
 			</div>
 
-			<div class="flex flex-row-reverse ml-2">
-				{#if step != 3}
+			<div class="flex flex-row gap-x-2">
+				<Button
+					size="sm"
+					variant={step == 1 ? 'border' : 'contained'}
+					disabled={step === 1 && pathError !== ''}
+					btnClasses={step == 3 ? 'invisible' : ''}
+					on:click={editScript}>Save (commit)</Button
+				>
+				<Button
+					variant="border"
+					size="sm"
+					btnClasses={step == 1 ? 'invisible' : ''}
+					on:click={() => changeStep(step - 1)}
+				>
+					Back
+				</Button>
+				{#if step < 3}
 					<Button
 						size="sm"
+						btnClasses={step == 3 ? 'invisible' : ''}
 						disabled={step === 1 && pathError !== ''}
 						on:click={() => changeStep(step + 1)}
 					>
@@ -131,28 +156,6 @@
 				{:else}
 					<Button size="sm" on:click={editScript}>Save</Button>
 				{/if}
-				{#if step > 1}
-					<Button
-						variant="border"
-						size="sm"
-						btnClasses="mr-2"
-						on:click={() => changeStep(step - 1)}
-					>
-						Back
-					</Button>
-				{/if}
-				{#if step == 2}
-					<Button
-						variant="border"
-						size="sm"
-						btnClasses="mr-2"
-						on:click={async () => {
-							editScript()
-						}}
-					>
-						Save (commit)
-					</Button>
-				{/if}
 			</div>
 		</div>
 	</div>
@@ -163,6 +166,7 @@
 			<div class="space-y-6">
 				<h2 class="border-b pb-1 mt-4">Path & Summary</h2>
 				<Path
+					bind:this={pathC}
 					bind:error={pathError}
 					bind:path={script.path}
 					{initialPath}
@@ -178,8 +182,9 @@
 					</div>
 				</Path>
 				<label class="block ">
-					<span class="text-gray-700">Summary <Required required={false} /></span>
+					<span class="text-gray-700 text-sm">Summary <Required required={false} /></span>
 					<textarea
+						bind:this={summaryC}
 						bind:value={script.summary}
 						class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 
 						focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 2841ebb43f..704fbe743a 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -11,11 +11,12 @@
 	import SchemaForm from './SchemaForm.svelte'
 	import LogPanel from './scriptEditor/LogPanel.svelte'
 	import { faGithub } from '@fortawesome/free-brands-svg-icons'
-	import EditorBar from './EditorBar.svelte'
+	import EditorBar, { EDITOR_BAR_WIDTH_THRESHOLD } from './EditorBar.svelte'
 	import TestJobLoader from './TestJobLoader.svelte'
 	import { onMount } from 'svelte'
 	import { Button, Kbd } from './common'
 	import SplitPanesWrapper from './splitPanes/SplitPanesWrapper.svelte'
+	import Tooltip from './Tooltip.svelte'
 
 	// Exported
 	export let schema: Schema = emptySchema()
@@ -25,6 +26,8 @@
 
 	let websocketAlive = { pyright: false, black: false, deno: false, go: false }
 
+	let width = 1200
+
 	// Internal state
 	let editor: Editor
 
@@ -98,26 +101,22 @@
 
 <svelte:window on:keydown={onKeyDown} />
 
-<div class="border-b-2 shadow-sm p-1 pr-4">
-	<div class="flex justify-between">
-		<EditorBar {editor} {lang} {websocketAlive} />
+<div class="border-b-2 shadow-sm p-1 pr-4" bind:clientWidth={width}>
+	<div class="flex justify-between space-x-2">
+		<EditorBar iconOnly={width < EDITOR_BAR_WIDTH_THRESHOLD} {editor} {lang} {websocketAlive} />
 
-		<div class="flex divide-x">
-			<div>
-				<Button
-					target="_blank"
-					href="https://github.com/windmill-labs/windmill-gh-action-deploy"
-					color="light"
-					size="xs"
-					btnClasses="mr-1"
-					startIcon={{
-						icon: faGithub
-					}}
-				>
-					Sync from Github
-				</Button>
-			</div>
-		</div>
+		<Button
+			target="_blank"
+			href="https://github.com/windmill-labs/windmill-gh-action-deploy"
+			color="light"
+			size="sm"
+			btnClasses="mr-1 hidden md:block"
+			startIcon={{
+				icon: faGithub
+			}}
+		>
+			Sync from Github
+		</Button>
 	</div>
 </div>
 <SplitPanesWrapper>
@@ -150,12 +149,14 @@
 	<Pane size={40} minSize={10}>
 		<Splitpanes horizontal>
 			<Pane size={30}>
-				<div class="p-4">
+				<div class="w-full  bg-gray-100 px-2 text-sm"
+					>Preview <Tooltip>
+						To recompute the input schema press <Kbd>Ctrl/Cmd</Kbd> + <Kbd>S</Kbd> or move the focus
+						outside of the text editor
+					</Tooltip></div
+				>
+				<div class="px-2">
 					<div class="break-all relative font-sans">
-						<p class="items-baseline break-normal text-sm text-gray-600 hidden md:block mb-3">
-							To recompute the input schema press <Kbd>Ctrl/Cmd</Kbd> + <Kbd>S</Kbd> or move the focus
-							outside of the text editor
-						</p>
 						<SchemaForm {schema} bind:args bind:isValid />
 					</div>
 				</div>
diff --git a/frontend/src/lib/components/ScriptSchema.svelte b/frontend/src/lib/components/ScriptSchema.svelte
index 042c8c3a68..0c5e21336d 100644
--- a/frontend/src/lib/components/ScriptSchema.svelte
+++ b/frontend/src/lib/components/ScriptSchema.svelte
@@ -9,6 +9,7 @@
 	import Highlight from 'svelte-highlight'
 	import json from 'svelte-highlight/languages/json'
 	import SvelteMarkdown from 'svelte-markdown'
+	import { Alert } from './common'
 
 	export let schema: Schema
 	export let summary: string
@@ -20,7 +21,7 @@
 </script>
 
 <div class="w-full">
-	<h1 class="mb-4">UI customisation</h1>
+	<h1 class="my-4">UI customisation</h1>
 
 	<Tabs selected="ui">
 		<Tab value="ui">UI</Tab>
@@ -49,15 +50,13 @@
 						</div>
 					</label>
 				</div>
-				<h2 class="border-b pb-1 mt-6">Arguments</h2>
-				<div class="bg-blue-100 border-l-4 border-blue-600 text-blue-700 p-4 m-4" role="alert">
-					<p class="font-bold">Synchronized with main signature</p>
-					<p>
-						Argument names, being required or not, and default values are derived from the main
-						signature of step 2 and cannot be edited directly. Change the main signature to edit
-						them.
-					</p>
-				</div>
+				<h2 class="border-b pb-1 my-4">Arguments</h2>
+				<Alert type="info" title="Synchronized with main signature">
+					Argument names, being required or not, and default values are derived from the main
+					signature of step 2 and cannot be edited directly. Change the main signature to edit them.
+				</Alert>
+				<div class="mt-4" />
+
 				<SchemaForm {schema} editableSchema={true} />
 			</TabContent>
 			<TabContent value="jsonschema">
diff --git a/frontend/src/lib/components/Tooltip.svelte b/frontend/src/lib/components/Tooltip.svelte
index 29282ca0e4..8c9b98f60e 100644
--- a/frontend/src/lib/components/Tooltip.svelte
+++ b/frontend/src/lib/components/Tooltip.svelte
@@ -2,7 +2,6 @@
 	import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 	import Icon from 'svelte-awesome'
 	import { createPopperActions } from 'svelte-popperjs'
-	import { fade } from 'svelte/transition'
 	const [popperRef, popperContent] = createPopperActions({
 		placement: 'auto'
 	})
@@ -17,7 +16,7 @@
 	})
 	const extraOpts = {
 		modifiers: [
-			betterPreventOverflow({ padding: 50 }),
+			betterPreventOverflow({ padding: 10 }),
 			{ name: 'offset', options: { offset: [8, 8] } },
 			{
 				name: 'arrow',
@@ -36,7 +35,7 @@
 		showTooltip = true
 	}
 	function close() {
-		timeout = setTimeout(() => (showTooltip = false), 200)
+		timeout = setTimeout(() => (showTooltip = false), 100)
 	}
 </script>
 
@@ -49,7 +48,6 @@
 </button>
 {#if showTooltip}
 	<div
-		transition:fade
 		id="tooltip"
 		use:popperContent={extraOpts}
 		on:mouseenter={open}
diff --git a/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte b/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte
index 3460e6d798..5b24d79688 100644
--- a/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte
+++ b/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte
@@ -19,7 +19,7 @@
 		<Button
 			size="sm"
 			color="light"
-			btnClasses={selectedIndex - 1 === index ? 'text-gray-800' : '!text-gray-500'}
+			btnClasses={selectedIndex - 1 === index ? 'text-gray-800 !font-bold' : '!text-gray-500'}
 			on:click={() => dispatch('select', { index })}
 			disabled={selectedIndex - 1 !== index ? disabled : false}
 		>
diff --git a/frontend/src/lib/components/common/tabs/Tabs.svelte b/frontend/src/lib/components/common/tabs/Tabs.svelte
index cf42353826..66742de0cc 100644
--- a/frontend/src/lib/components/common/tabs/Tabs.svelte
+++ b/frontend/src/lib/components/common/tabs/Tabs.svelte
@@ -34,7 +34,7 @@
 </script>
 
 <div
-	class="border-b border-gray-200 flex flex-row whitespace-nowrap overflow-y-auto {$$props.class}"
+	class="border-b border-gray-200 flex flex-row whitespace-nowrap overflow-y-auto scrollbar-hidden {$$props.class}"
 >
 	<slot />
 </div>
diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index 360c40f8f0..b535eb4d99 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -1,16 +1,9 @@
-<script context="module" lang="ts">
-	export type FlowModuleWidthContext = {
-		width: Writable<number>
-		threshold: number
-	}
-</script>
-
 <script lang="ts">
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import Tab from '$lib/components/common/tabs/Tab.svelte'
 	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
 	import Editor from '$lib/components/Editor.svelte'
-	import EditorBar from '$lib/components/EditorBar.svelte'
+	import EditorBar, { EDITOR_BAR_WIDTH_THRESHOLD } from '$lib/components/EditorBar.svelte'
 	import ModulePreview from '$lib/components/ModulePreview.svelte'
 	import { createScriptFromInlineScript, fork } from '$lib/components/flows/flowStateUtils'
 	import { flowStore } from '$lib/components/flows/flowStore'
@@ -24,12 +17,13 @@
 	import { afterUpdate, getContext, setContext } from 'svelte'
 	import type { FlowEditorContext } from '../types'
 	import { loadSchemaFromModule } from '../utils'
-	import { writable, type Writable } from 'svelte/store'
 	import FlowModuleScript from './FlowModuleScript.svelte'
 	import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
 	import FlowModuleSuspend from './FlowModuleSuspend.svelte'
 	import FlowRetries from './FlowRetries.svelte'
 	import { getStepPropPicker } from '../previousResults'
+	import Tooltip from '$lib/components/Tooltip.svelte'
+	import { Kbd } from '$lib/components/common'
 
 	const { selectedId, previewArgs } = getContext<FlowEditorContext>('FlowEditorContext')
 
@@ -47,6 +41,8 @@
 	let panes: HTMLElement
 	let totalTopGap = 0
 
+	let width = 1200
+
 	let inputTransforms: Record<string, any> =
 		flowModule.value.type === 'rawscript' || flowModule.value.type === 'script'
 			? flowModule.value.input_transforms
@@ -85,14 +81,6 @@
 		}
 	}
 
-	export const FLOW_MODULE_WIDTH_THRESHOLD = 768
-	const width = writable<number>(0)
-
-	setContext<FlowModuleWidthContext>('FlowModuleWidth', {
-		width,
-		threshold: FLOW_MODULE_WIDTH_THRESHOLD
-	})
-
 	afterUpdate(() => {
 		totalTopGap = 0
 		if (!(wrapper && panes)) return
@@ -106,7 +94,7 @@
 <svelte:window on:keydown={onKeyDown} />
 
 {#if flowModule.value.type === 'rawscript' || flowModule.value.type === 'script'}
-	<div class="h-full" bind:this={wrapper} bind:clientWidth={$width}>
+	<div class="h-full" bind:this={wrapper} bind:clientWidth={width}>
 		<FlowCard bind:flowModule>
 			<svelte:fragment slot="header">
 				<FlowModuleHeader
@@ -137,7 +125,7 @@
 						{editor}
 						lang={flowModule.value['language'] ?? 'deno'}
 						{websocketAlive}
-						iconOnly={$width < FLOW_MODULE_WIDTH_THRESHOLD}
+						iconOnly={width < 768}
 					/>
 				</div>
 			{/if}
@@ -173,7 +161,12 @@
 					</Pane>
 					<Pane size={50} minSize={20}>
 						<Tabs bind:selected>
-							<Tab value="inputs">Inputs</Tab>
+							<Tab value="inputs"
+								><Tooltip>
+									Move the focus outside of the text editor to recompute the inputs or press
+									<Kbd>Ctrl/Cmd</Kbd> + <Kbd>S</Kbd>
+								</Tooltip>Inputs</Tab
+							>
 							<Tab value="test">Test</Tab>
 							<Tab value="retries">Retries</Tab>
 							{#if !$selectedId.includes('failure')}
@@ -188,11 +181,6 @@
 										priorId={previousModuleId}
 										pickableProperties={stepPropPicker.pickableProperties}
 									>
-										<p class="items-baseline text-xs text-gray-700 italic hidden md:block mb-2">
-											Move the focus outside of the text editor to recompute the inputs or press
-											Ctrl/Cmd+S
-										</p>
-
 										<SchemaForm
 											schema={$flowStateStore[$selectedId].schema}
 											inputTransform={true}
diff --git a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
index 6df522fec6..f93f0cf328 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Button from '$lib/components/common/button/Button.svelte'
+	import { EDITOR_BAR_WIDTH_THRESHOLD } from '$lib/components/EditorBar.svelte'
 	import type { FlowModule } from '$lib/gen'
 	import { classNames } from '$lib/utils'
 	import {
@@ -9,22 +10,22 @@
 		faSave,
 		faStop
 	} from '@fortawesome/free-solid-svg-icons'
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { createEventDispatcher } from 'svelte'
 	import Icon from 'svelte-awesome'
 	import { isEmptyFlowModule } from '../utils'
-	import type { FlowModuleWidthContext } from './FlowModuleComponent.svelte'
 
 	export let module: FlowModule
 
 	const dispatch = createEventDispatcher()
-	const { width, threshold } = getContext<FlowModuleWidthContext>('FlowModuleWidth')
+
+	let width = 0
 
 	$: shouldPick = isEmptyFlowModule(module)
-	$: iconOnly = $width < threshold
+	$: iconOnly = width < EDITOR_BAR_WIDTH_THRESHOLD
 	$: moduleRetry = module.retry?.constant || module.retry?.exponential
 </script>
 
-<div class="flex flex-row space-x-2">
+<div class="flex flex-row space-x-2" bind:clientWidth={width}>
 	{#if !shouldPick}
 		<span
 			class={classNames('badge', module.stop_after_if ? 'badge-on' : 'badge-off')}
diff --git a/frontend/src/lib/components/flows/map/MapItem.svelte b/frontend/src/lib/components/flows/map/MapItem.svelte
index 069e086ea8..4f2deba60d 100644
--- a/frontend/src/lib/components/flows/map/MapItem.svelte
+++ b/frontend/src/lib/components/flows/map/MapItem.svelte
@@ -44,7 +44,7 @@
 				</div>
 			</FlowModuleSchemaItem>
 			<div class="flex flex-row w-full">
-				<div class="w-8 shrink-0 " />
+				<div class="w-8 shrink-0 line" />
 				<div class="grow my-4 overflow-auto">
 					<div class="w-full pr-1">
 						<FlowModuleSchemaMap bind:modules={mod.value.modules} color="orange" />
diff --git a/frontend/src/lib/components/flows/previousResults.ts b/frontend/src/lib/components/flows/previousResults.ts
index 14174d4672..d20b5ed806 100644
--- a/frontend/src/lib/components/flows/previousResults.ts
+++ b/frontend/src/lib/components/flows/previousResults.ts
@@ -96,11 +96,11 @@ function getFlowInput(
 
 			if (parentModule.value.type === 'forloopflow') {
 				return {
-					...parentFlowInput,
 					iter: {
 						value: "Iteration's value",
 						index: "Iteration's index"
-					}
+					},
+					...parentFlowInput,
 				}
 			} else {
 				// Branches
diff --git a/frontend/src/lib/components/sidebar/SidebarContent.svelte b/frontend/src/lib/components/sidebar/SidebarContent.svelte
index 5c0bd5a08c..56db906bac 100644
--- a/frontend/src/lib/components/sidebar/SidebarContent.svelte
+++ b/frontend/src/lib/components/sidebar/SidebarContent.svelte
@@ -52,7 +52,7 @@
 	export let isCollapsed: boolean = false
 </script>
 
-<div class="flex-1 flex flex-col py-4 overflow-x-hidden scrollbar-hide">
+<div class="flex-1 flex flex-col py-4 overflow-x-hidden scrollbar-hidden">
 	<nav class="h-full flex justify-between flex-col px-2">
 		<div class="space-y-2">
 			{#each mainMenuLinks as menuLink}
@@ -71,16 +71,3 @@
 		</div>
 	</nav>
 </div>
-
-<style>
-	/* For Webkit-based browsers (Chrome, Safari and Opera) */
-	.scrollbar-hide::-webkit-scrollbar {
-		display: none;
-	}
-
-	/* For IE, Edge and Firefox */
-	.scrollbar-hide {
-		-ms-overflow-style: none; /* IE and Edge */
-		scrollbar-width: none; /* Firefox */
-	}
-</style>
diff --git a/frontend/src/routes/run/[...run].svelte b/frontend/src/routes/run/[...run].svelte
index 3bf6af1130..57396e3103 100644
--- a/frontend/src/routes/run/[...run].svelte
+++ b/frontend/src/routes/run/[...run].svelte
@@ -168,7 +168,7 @@
 	</ActionRow>
 {/if}
 <CenteredPage>
-	<div class="flex flex-row flex-wrap justify-between items-center gap-4 pb-4">
+	<div class="flex flex-row flex-wrap justify-between items-center gap-4 py-4">
 		<h1>
 			<div>
 				{#if job}