From 89920e77f3f5dc45db939ec938d92c881dccc8a0 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Thu, 9 Apr 2026 11:08:35 -0400
Subject: [PATCH] fix: flow dev page layout and compact toolbar improvements
 (#8776)

- Fix JSON.parse error on /flows/dev page when editor not yet initialized
- Increase compact topbar threshold from 700px to 800px
- Reposition "Test flow" button below settings bar when pane is narrow on dev pages

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/lib/components/Dev.svelte          |  6 ++++--
 .../flows/map/FlowModuleSchemaMap.svelte        |  2 +-
 frontend/src/routes/flows/dev/+page.svelte      | 17 +++++++++++++----
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/Dev.svelte b/frontend/src/lib/components/Dev.svelte
index d9ec19a211..7113fadcb3 100644
--- a/frontend/src/lib/components/Dev.svelte
+++ b/frontend/src/lib/components/Dev.svelte
@@ -112,6 +112,8 @@
 	let darkModeToggle: DarkModeToggle | undefined = $state()
 	let darkMode: boolean = $state(document.documentElement.classList.contains('dark'))
 	let modeInitialized = $state(false)
+	let paneWidth = $state(0)
+	let compactPreview = $derived(paneWidth < 800)
 	function initializeMode() {
 		modeInitialized = true
 		darkModeToggle?.toggle()
@@ -847,7 +849,7 @@
 	{:else}
 		<!-- <div class="h-full w-full grid grid-cols-2"> -->
 		<div class="h-full w-full">
-			<div class="flex flex-col max-h-screen h-full relative">
+			<div class="flex flex-col max-h-screen h-full relative" bind:clientWidth={paneWidth}>
 				<div class="absolute top-0 left-2">
 					<DarkModeToggle bind:darkMode bind:this={darkModeToggle} forcedDarkMode={false} />
 					{#if $userStore}
@@ -857,7 +859,7 @@
 					{/if}
 				</div>
 
-				<div class="flex justify-center pt-1 z-50 absolute -translate-x-[100%] right-2 top-2 gap-2">
+				<div class="flex justify-center pt-1 z-50 absolute gap-2 {compactPreview ? 'left-1/2 -translate-x-1/2 top-14' : '-translate-x-[100%] right-2 top-2'}">
 					<FlowPreviewButtons
 						{suspendStatus}
 						bind:this={flowPreviewButtons}
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index c20c904ca4..fd9ffdef9f 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -299,7 +299,7 @@
 
 	let minHeight = $state(0)
 	let flowPaneWidth = $state(0)
-	let compactTopbar = $derived(flowPaneWidth < 700)
+	let compactTopbar = $derived(flowPaneWidth < 800)
 
 	export function selectNextId(id: any) {
 		if (flowStore.val.value.modules) {
diff --git a/frontend/src/routes/flows/dev/+page.svelte b/frontend/src/routes/flows/dev/+page.svelte
index d80f96ed8b..08ac92bda4 100644
--- a/frontend/src/routes/flows/dev/+page.svelte
+++ b/frontend/src/routes/flows/dev/+page.svelte
@@ -54,6 +54,8 @@
 	let darkModeToggle: DarkModeToggle | undefined = $state()
 	let darkMode: boolean = $state(document.documentElement.classList.contains('dark'))
 	let modeInitialized = $state(false)
+	let paneWidth = $state(0)
+	let compactPreview = $derived(paneWidth < 800)
 	function initializeMode() {
 		modeInitialized = true
 		darkModeToggle?.toggle()
@@ -224,8 +226,15 @@
 	let editor: SimpleEditor | undefined = $state()
 
 	function updateCode(editor: SimpleEditor | undefined, flow: OpenFlow) {
-		if (editor && !deepEqual(flow, JSON.parse(editor.getCode()))) {
-			editor.setCode(JSON.stringify(flow, null, 4))
+		if (!editor) return
+		const code = editor.getCode()
+		if (!code) return
+		try {
+			if (!deepEqual(flow, JSON.parse(code))) {
+				editor.setCode(JSON.stringify(flow, null, 4))
+			}
+		} catch (e) {
+			// editor not ready yet
 		}
 	}
 
@@ -265,7 +274,7 @@
 				updateFromCode(e.detail.code)
 			}}
 		/>
-		<div class="flex flex-col max-h-screen h-full relative">
+		<div class="flex flex-col max-h-screen h-full relative" bind:clientWidth={paneWidth}>
 			<div class="absolute top-0 left-2">
 				<DarkModeToggle bind:darkMode bind:this={darkModeToggle} forcedDarkMode={false} />
 				{#if $userStore}
@@ -275,7 +284,7 @@
 				{/if}
 			</div>
 
-			<div class="flex justify-center pt-1 z-50 absolute right-2 top-2 gap-2">
+			<div class="flex justify-center pt-1 z-50 absolute gap-2 {compactPreview ? 'left-1/2 -translate-x-1/2 top-14' : 'right-2 top-2'}">
 				<FlowPreviewButtons bind:this={flowPreviewButtons} {suspendStatus} />
 			</div>
 			<Splitpanes horizontal class="h-full max-h-screen grow">