From 139fbee0ecb99878dee230d287697f8e8432b1ce Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Mon, 3 Nov 2025 13:23:01 +0100
Subject: [PATCH] always show subflow expand button (#7033)

* fix unwanted tab change

* expand subflow is always visible

* nit

* nit
---
 .../flows/map/FlowModuleSchemaItem.svelte     | 65 ++++++++++---------
 .../lib/components/flows/map/MapItem.svelte   |  2 +-
 .../lib/components/graph/FlowGraphV2.svelte   |  2 +-
 .../graph/renderers/nodes/SubflowBound.svelte | 24 +++----
 4 files changed, 48 insertions(+), 45 deletions(-)

diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index a3e5474aa7..7f80abcdc7 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -489,14 +489,16 @@
 		</div>
 
 		{#if deletable && !action}
-			<div
-				class="absolute -translate-y-[100%] top-2 -right-2 flex flex-row gap-1 p-1 min-w-[52px] h-7 group justify-end"
-			>
-				{#if id !== 'preprocessor'}
+			{#if maximizeSubflow !== undefined}
+				{@render buttonMaximizeSubflow?.()}
+			{/if}
+
+			{#if id !== 'preprocessor'}
+				<div class={twMerge('absolute -translate-y-[100%] top-2 right-4 h-7 p-1 min-w-7')}>
 					<button
 						class={twMerge(
-							'trash center-center p-1 text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-accent-hover hover:text-white',
-							hover ? 'block' : '!hidden',
+							'trash center-center p-1 text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-tertiary',
+							hover || selected ? 'block' : '!hidden',
 							'shadow-md rounded-md',
 							'group-hover:block'
 						)}
@@ -505,12 +507,10 @@
 					>
 						<Move size={12} />
 					</button>
-				{/if}
-
-				{#if maximizeSubflow !== undefined && (hover || selected)}
-					{@render buttonMaximizeSubflow?.()}
-				{/if}
+				</div>
+			{/if}
 
+			<div class="absolute -translate-y-[100%] top-2 -right-2 h-7 p-1 min-w-7">
 				<button
 					class={twMerge(
 						'trash center-center text-secondary shadow-sm bg-surface duration-0 hover:bg-red-400 hover:text-white p-1',
@@ -557,11 +557,7 @@
 				</Popover>
 			{/if}
 		{:else if maximizeSubflow !== undefined}
-			<div
-				class="absolute -translate-y-[100%] top-2 right-10 flex flex-row gap-1 p-1 min-w-[52px] h-7 justify-end"
-			>
-				{@render buttonMaximizeSubflow?.()}
-			</div>
+			{@render buttonMaximizeSubflow?.()}
 		{/if}
 	</div>
 
@@ -624,22 +620,27 @@
 </div>
 
 {#snippet buttonMaximizeSubflow()}
-	<button
-		title="Expand subflow"
-		class={twMerge(
-			'center-center text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-accent-hover hover:text-white p-1',
-			selected || hover ? 'block' : '!hidden',
-			'group-hover:block',
-			'shadow-md rounded-md'
-		)}
-		onclick={(e) => {
-			e.stopPropagation()
-			e.preventDefault()
-			maximizeSubflow?.()
-		}}
-	>
-		<Maximize2 size={12} />
-	</button>
+	<div class="absolute -translate-y-[100%] top-2 right-10 h-7 p-1">
+		<button
+			title="Expand subflow"
+			class={twMerge(
+				'center-center text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-tertiary p-1',
+				'shadow-md rounded-md',
+				hover || selected ? 'opacity-100' : 'opacity-50'
+			)}
+			onclick={(e) => {
+				e.stopPropagation()
+				e.preventDefault()
+				maximizeSubflow?.()
+			}}
+			onpointerdown={(e) => {
+				e.stopPropagation()
+				e.preventDefault()
+			}}
+		>
+			<Maximize2 size={12} />
+		</button>
+	</div>
 {/snippet}
 
 <style>
diff --git a/frontend/src/lib/components/flows/map/MapItem.svelte b/frontend/src/lib/components/flows/map/MapItem.svelte
index fcf67b83a4..26df6f1803 100644
--- a/frontend/src/lib/components/flows/map/MapItem.svelte
+++ b/frontend/src/lib/components/flows/map/MapItem.svelte
@@ -118,7 +118,7 @@
 			<div
 				class={twMerge(
 					'absolute z-10 right-0 -top-4 center-center text-primary text-2xs',
-					editMode ? 'text-gray-400 dark:text-gray-500 text-2xs font-normal mr-2 right-10' : ''
+					editMode ? 'text-gray-400 dark:text-gray-500 text-2xs font-normal mr-2 right-16' : ''
 				)}
 			>
 				{msToSec(duration_ms)}s
diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index 8b16261e0d..751de1a7bc 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -636,7 +636,7 @@
 				nodesDraggable={false}
 				--background-color={false}
 			>
-				<div class="absolute inset-0 !bg-surface-secondary h-full"></div>
+				<div class="absolute inset-0 !bg-surface-secondary h-full" id="flow-graph-v2"></div>
 				{#if leftHeader}
 					<div class="absolute top-2 left-2 z-10">
 						{@render leftHeader()}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/SubflowBound.svelte b/frontend/src/lib/components/graph/renderers/nodes/SubflowBound.svelte
index 5f774cb798..bb23d4566a 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/SubflowBound.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/SubflowBound.svelte
@@ -24,16 +24,18 @@
 				setTimeout(() => data.eventHandlers?.select(data.id))
 			}}
 		/>
-		<button
-			title="Unexpand subflow"
-			class="z-50 absolute -top-[10px] right-[25px] rounded-md h-[20px] w-[20px] center-center text-primary bg-surface duration-0 hover:bg-surface-accent-hover hover:text-white"
-			onclick={stopPropagation(
-				preventDefault(() => {
-					data.eventHandlers.minimizeSubflow(data.subflowId)
-				})
-			)}
-		>
-			<Minimize2 size={12} />
-		</button>
+		<div class="z-50 absolute -top-4 right-11 rounded-md text-primary bg-surface">
+			<button
+				title="Unexpand subflow"
+				class="rounded-md center-center text-primary hover:bg-surface-tertiary shadow-md p-1 duration-0"
+				onclick={stopPropagation(
+					preventDefault(() => {
+						data.eventHandlers.minimizeSubflow(data.subflowId)
+					})
+				)}
+			>
+				<Minimize2 size={12} />
+			</button>
+		</div>
 	{/snippet}
 </NodeWrapper>