From 62b57ae4a2c79951fd35cd1c867aec180e9051b5 Mon Sep 17 00:00:00 2001
From: Guilhem Lemouel <guilhemlemouel@gmail.com>
Date: Wed, 25 Mar 2026 16:46:49 +0100
Subject: [PATCH] feat: responsive dev layout and hide splitter for single-pane
 views

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/lib/components/Dev.svelte        | 95 ++++++++++---------
 .../flows/content/FlowModuleComponent.svelte  | 16 +++-
 2 files changed, 66 insertions(+), 45 deletions(-)

diff --git a/frontend/src/lib/components/Dev.svelte b/frontend/src/lib/components/Dev.svelte
index 97287a607d..6ccf699579 100644
--- a/frontend/src/lib/components/Dev.svelte
+++ b/frontend/src/lib/components/Dev.svelte
@@ -110,6 +110,9 @@
 
 	let darkModeToggle: DarkModeToggle | undefined = $state()
 	let darkMode: boolean = $state(document.documentElement.classList.contains('dark'))
+	let flowContainerWidth = $state(0)
+	let flowContainerHeight = $state(0)
+	let flowHorizontalSplit = $derived(flowContainerWidth < flowContainerHeight)
 	let modeInitialized = $state(false)
 	function initializeMode() {
 		modeInitialized = true
@@ -864,7 +867,11 @@
 		</div>
 	{:else}
 		<!-- <div class="h-full w-full grid grid-cols-2"> -->
-		<div class="h-full w-full">
+		<div
+			class="h-full w-full"
+			bind:clientWidth={flowContainerWidth}
+			bind:clientHeight={flowContainerHeight}
+		>
 			<div class="flex flex-col max-h-screen h-full relative">
 				<div class="absolute top-0 left-2">
 					<DarkModeToggle bind:darkMode bind:this={darkModeToggle} forcedDarkMode={false} />
@@ -875,49 +882,51 @@
 					{/if}
 				</div>
 
-				<div class="flex justify-center pt-1 z-50 absolute right-2 top-2 gap-2">
-					<FlowPreviewButtons
-						{suspendStatus}
-						bind:this={flowPreviewButtons}
-						{onJobDone}
-						bind:localModuleStates
-						onRunPreview={() => {
-							showJobStatus = true
-						}}
-					/>
-				</div>
-				<Splitpanes horizontal class="h-full max-h-screen grow">
+				<Splitpanes horizontal={flowHorizontalSplit} class="h-full max-h-screen grow">
 					<Pane size={67}>
-						{#if flowStore.val?.value?.modules}
-							<div id="flow-editor"></div>
-							<FlowModuleSchemaMap
-								bind:this={flowModuleSchemaMap}
-								disableAi
-								disableTutorials
-								smallErrorHandler={true}
-								disableStaticInputs
-								localModuleStates={showJobStatus ? localModuleStates : {}}
-								onTestUpTo={flowPreviewButtons?.testUpTo}
-								testModuleStates={modulesTestStates}
-								isOwner={flowPreviewContent?.getIsOwner?.()}
-								onTestFlow={flowPreviewButtons?.runPreview}
-								isRunning={flowPreviewContent?.getIsRunning?.()}
-								onCancelTestFlow={flowPreviewContent?.cancelTest}
-								onOpenPreview={flowPreviewButtons?.openPreview}
-								onHideJobStatus={resetModulesStates}
-								flowJob={job}
-								{showJobStatus}
-								onDelete={(id) => {
-									delete localModuleStates[id]
-									delete modulesTestStates.states[id]
-								}}
-								{flowHasChanged}
-								controlsPosition="bottom"
-							/>
-						{:else}
-							<div class="text-red-400 mt-20">Missing flow modules</div>
-						{/if}
-					</Pane>
+						<div class="relative h-full w-full">
+							{#if flowStore.val?.value?.modules}
+								<div id="flow-editor"></div>
+								<div class="flex justify-center pt-1 z-50 absolute right-2 top-2 gap-2">
+									<FlowPreviewButtons
+										{suspendStatus}
+										bind:this={flowPreviewButtons}
+										{onJobDone}
+										bind:localModuleStates
+										onRunPreview={() => {
+											showJobStatus = true
+										}}
+									/>
+								</div>
+								<FlowModuleSchemaMap
+									bind:this={flowModuleSchemaMap}
+									disableAi
+									disableTutorials
+									smallErrorHandler={true}
+									disableStaticInputs
+									localModuleStates={showJobStatus ? localModuleStates : {}}
+									onTestUpTo={flowPreviewButtons?.testUpTo}
+									testModuleStates={modulesTestStates}
+									isOwner={flowPreviewContent?.getIsOwner?.()}
+									onTestFlow={flowPreviewButtons?.runPreview}
+									isRunning={flowPreviewContent?.getIsRunning?.()}
+									onCancelTestFlow={flowPreviewContent?.cancelTest}
+									onOpenPreview={flowPreviewButtons?.openPreview}
+									onHideJobStatus={resetModulesStates}
+									flowJob={job}
+									{showJobStatus}
+									onDelete={(id) => {
+										delete localModuleStates[id]
+										delete modulesTestStates.states[id]
+									}}
+									{flowHasChanged}
+									controlsPosition="bottom"
+								/>
+							{:else}
+								<div class="text-red-400 mt-20">Missing flow modules</div>
+							{/if}
+						</div></Pane
+					>
 					<Pane size={33}>
 						{#key reload}
 							<FlowEditorPanel
diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index 126f0056f0..da9a70398e 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -812,7 +812,11 @@
 					</div>
 				{/if}
 
-				<div class="min-h-0 flex-grow" id="flow-editor-editor">
+				<div
+					class="min-h-0 flex-grow"
+					id="flow-editor-editor"
+					class:no-splitter={flowModule.value.type === 'aiagent' || noEditor}
+				>
 					<Splitpanes horizontal>
 						{#if flowModule.value.type !== 'aiagent'}
 							<Pane bind:size={editorPanelSize} minSize={10} class="relative">
@@ -1155,7 +1159,9 @@
 													<Section label="Continue on error">
 														{#snippet header()}
 															<Tooltip>
-																When enabled, the flow will continue to the next step even if this step fails (after exhausting all retries, if any). This enables to process the error in a branch one for instance.
+																When enabled, the flow will continue to the next step even if this
+																step fails (after exhausting all retries, if any). This enables to
+																process the error in a branch one for instance.
 															</Tooltip>
 														{/snippet}
 														<Toggle
@@ -1512,3 +1518,9 @@
 		<Button size="sm" on:click={confirmDebugBetaWarning}>Continue</Button>
 	{/snippet}
 </Modal>
+
+<style>
+	.no-splitter :global(.splitpanes__splitter) {
+		display: none;
+	}
+</style>