From 383a8910f7bba533f6d773021f96d5893e65daeb Mon Sep 17 00:00:00 2001
From: Guilhem Lemouel <guilhemlemouel@gmail.com>
Date: Tue, 10 Mar 2026 13:33:54 +0100
Subject: [PATCH] Revert "style: move step count tab to right side of group
 bounding box"

This reverts commit c5f366e68a51f44ea3d23595f0bf3128cdfb1f25.
---
 .../flows/map/FlowModuleSchemaItem.svelte     | 10 +--
 .../components/graph/GroupActionBar.svelte    | 25 ++----
 .../lib/components/graph/GroupOverlay.svelte  | 80 +++++++++----------
 .../components/graph/MoveHandleButton.svelte  |  4 +-
 .../lib/components/graph/StepCountTab.svelte  |  2 +-
 .../components/graph/groupEditor.svelte.ts    |  2 +-
 .../graph/renderers/nodes/ModuleNode.svelte   |  5 +-
 7 files changed, 58 insertions(+), 70 deletions(-)

diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index 020e7e6ec3..faadfb885b 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -209,9 +209,6 @@
 
 	let outputPickerInner: OutputPickerInner | undefined = $state(undefined)
 	let historyOpen = $derived.by(() => outputPickerInner?.getHistoryOpen?.() ?? false)
-
-	const NODE_ACTION_CLASS =
-		'center-center p-1 text-secondary  cursor-grab hover:bg-surface-hover hover:text-primary'
 </script>
 
 {#if deletable && id && editId}
@@ -535,7 +532,7 @@
 
 			{#if !isMultiSelected && id !== 'preprocessor' && moveManager && id}
 				<div
-					class="absolute -translate-y-[100%] top-1 right-5 h-7 p-1 min-w-7"
+					class="absolute -translate-y-[100%] top-2 right-5 h-7 p-1 min-w-7"
 					style="will-change: transform;"
 				>
 					<MoveHandleButton
@@ -551,7 +548,7 @@
 
 			{#if !isMultiSelected && menuItems && menuItems.length > 0}
 				<div
-					class="absolute -translate-y-[100%] top-1 -right-1 h-7 p-1 min-w-7"
+					class="absolute -translate-y-[100%] top-2 -right-2 h-7 p-1 min-w-7"
 					style="will-change: transform;"
 				>
 					<DropdownV2
@@ -564,8 +561,9 @@
 						{#snippet buttonReplacement()}
 							<button
 								class={twMerge(
-									NODE_ACTION_CLASS,
+									'trash center-center p-1 text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-tertiary',
 									hover || selected || dropdownOpen ? 'block' : '!hidden',
+									'shadow-md rounded-md',
 									'group-hover:block'
 								)}
 								onpointerdown={stopPropagation(preventDefault(() => {}))}
diff --git a/frontend/src/lib/components/graph/GroupActionBar.svelte b/frontend/src/lib/components/graph/GroupActionBar.svelte
index af0618da2f..1aa4537b1a 100644
--- a/frontend/src/lib/components/graph/GroupActionBar.svelte
+++ b/frontend/src/lib/components/graph/GroupActionBar.svelte
@@ -34,7 +34,7 @@
 </script>
 
 <div
-	class="absolute -translate-y-[100%] top-1 right-0 h-7 p-1 min-w-7"
+	class="absolute -translate-y-[100%] top-2 right-0 h-7 p-1 min-w-7"
 	style="will-change: transform;"
 >
 	<DropdownV2
@@ -47,8 +47,9 @@
 		{#snippet buttonReplacement()}
 			<button
 				class={twMerge(
-					'center-center p-1 text-secondary duration-0 hover:bg-surface-hover hover:text-primary rounded-md',
-					visible || menuOpen ? 'block' : '!hidden'
+					'center-center p-1 text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-tertiary',
+					visible || menuOpen ? 'block' : '!hidden',
+					'shadow-md rounded-md'
 				)}
 				onpointerdown={stopPropagation(preventDefault(() => {}))}
 				title="Actions"
@@ -57,9 +58,7 @@
 			</button>
 		{/snippet}
 		{#snippet menu()}
-			<div
-				class="bg-surface-tertiary dark:border w-56 origin-top-right rounded-lg shadow-lg focus:outline-none py-1"
-			>
+			<div class="bg-surface-tertiary dark:border w-56 origin-top-right rounded-lg shadow-lg focus:outline-none py-1">
 				<!-- Color picker -->
 				<div class="px-4 py-2">
 					<div class="grid grid-cols-5 gap-1">
@@ -90,15 +89,10 @@
 				<!-- Add / Remove note -->
 				<button
 					class="px-4 py-2 text-primary font-normal hover:bg-surface-hover cursor-pointer text-xs w-full flex flex-row gap-2 items-center rounded-sm"
-					onclick={() => {
-						note == null ? onAddNote() : onRemoveNote()
-						menuOpen = false
-					}}
+					onclick={() => { note == null ? onAddNote() : onRemoveNote(); menuOpen = false }}
 				>
 					<StickyNote size={14} class="shrink-0" />
-					<p class="truncate grow min-w-0 whitespace-nowrap text-left"
-						>{note == null ? 'Add note' : 'Remove note'}</p
-					>
+					<p class="truncate grow min-w-0 whitespace-nowrap text-left">{note == null ? 'Add note' : 'Remove note'}</p>
 				</button>
 
 				{#if onDeleteGroup}
@@ -107,10 +101,7 @@
 					<!-- Ungroup -->
 					<button
 						class="px-4 py-2 font-normal hover:bg-red-500/10 cursor-pointer text-xs w-full flex flex-row gap-2 items-center rounded-sm text-red-600 dark:text-red-400"
-						onclick={() => {
-							onDeleteGroup?.()
-							menuOpen = false
-						}}
+						onclick={() => { onDeleteGroup?.(); menuOpen = false }}
 					>
 						<Ungroup size={14} class="shrink-0" />
 						<p class="truncate grow min-w-0 whitespace-nowrap text-left">Ungroup</p>
diff --git a/frontend/src/lib/components/graph/GroupOverlay.svelte b/frontend/src/lib/components/graph/GroupOverlay.svelte
index 97066a90e4..fedaac3848 100644
--- a/frontend/src/lib/components/graph/GroupOverlay.svelte
+++ b/frontend/src/lib/components/graph/GroupOverlay.svelte
@@ -86,11 +86,12 @@
 		if (group.module_ids.length === 0) return null
 		const { minX, minY, maxX, maxY } = calculateNodesBoundsWithOffset(group.module_ids, allNodes)
 		const padding = 16
+		const topPadding = 28
 		return {
 			x: minX - padding,
-			y: minY - padding,
+			y: minY - topPadding,
 			width: maxX - minX + 2 * padding,
-			height: maxY - minY + 2 * padding
+			height: maxY - minY + topPadding + padding
 		}
 	}
 
@@ -166,7 +167,7 @@
 		// Include the header node itself in the bounds
 		const allIds = [node.id, ...innerIds]
 		const { minX, minY, maxX, maxY } = calculateNodesBoundsWithOffset(allIds, allNodes)
-		const padding = 8
+		const padding = 16
 		return {
 			x: minX - padding,
 			y: minY - padding,
@@ -197,11 +198,11 @@
 			<ViewportPortal target="front">
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
-					class="absolute flex items-start justify-end"
+					class="absolute flex items-start justify-between"
 					style="pointer-events: auto; transform: translate({bounds.x}px, {bounds.y}px); width: {bounds.width}px;"
 					style:z-index="4"
 				>
-					<div class="relative" style="margin-right: 16px;">
+					<div class="relative" style="margin-left: 16px;">
 						<StepCountTab
 							stepCount={group.module_ids.length}
 							color={group.color}
@@ -209,43 +210,42 @@
 							short
 							onExpand={() => toggleCollapse(group.id)}
 						/>
+						{#if editingGroupId === group.id}
+							{@const textColorClass =
+								NOTE_COLORS[(group.color as NoteColor) ?? NoteColor.BLUE]?.text ?? ''}
+							<input
+								bind:this={summaryInputEl}
+								bind:value={summaryInput}
+								class="absolute !text-3xs !font-medium !h-4 !bg-transparent !outline-none {textColorClass}"
+								style="top: 2px; left:-3px; width: 160px; padding: 2px 2px;"
+								onblur={() => saveSummary(group.id)}
+								onkeydown={(e) => handleSummaryKeydown(e, group.id)}
+								onclick={stopPropagation(preventDefault(() => {}))}
+								onpointerdown={stopPropagation(preventDefault(() => {}))}
+								spellcheck={false}
+							/>
+						{:else}
+							{@const textColorClass =
+								NOTE_COLORS[(group.color as NoteColor) ?? NoteColor.BLUE]?.text ?? ''}
+							<!-- svelte-ignore a11y_click_events_have_key_events -->
+							<!-- svelte-ignore a11y_no_static_element_interactions -->
+							<span
+								class="absolute text-3xs font-medium truncate max-w-[150px] text-opacity-60 {textColorClass} {editMode
+									? 'cursor-text rounded px-0.5 -mx-0.5 hover:text-opacity-100'
+									: ''}"
+								style="top: 2px; left: 0px;"
+								onclick={editMode
+									? stopPropagation(
+											preventDefault(() => startEditingSummary(group.id, group.summary ?? ''))
+										)
+									: undefined}
+								onpointerdown={editMode ? stopPropagation(preventDefault(() => {})) : undefined}
+								>{group.summary || (editMode ? 'Group' : '')}</span
+							>
+						{/if}
 					</div>
-
-					{#if editingGroupId === group.id}
-						{@const textColorClass =
-							NOTE_COLORS[(group.color as NoteColor) ?? NoteColor.BLUE]?.text ?? ''}
-						<input
-							bind:this={summaryInputEl}
-							bind:value={summaryInput}
-							class="absolute !text-3xs !font-medium !h-4 !bg-transparent !outline-none {textColorClass}"
-							style="top: -18px; left:-3px; width: 160px; padding: 2px 2px;"
-							onblur={() => saveSummary(group.id)}
-							onkeydown={(e) => handleSummaryKeydown(e, group.id)}
-							onclick={stopPropagation(preventDefault(() => {}))}
-							onpointerdown={stopPropagation(preventDefault(() => {}))}
-							spellcheck={false}
-						/>
-					{:else}
-						{@const textColorClass =
-							NOTE_COLORS[(group.color as NoteColor) ?? NoteColor.BLUE]?.text ?? ''}
-						<!-- svelte-ignore a11y_click_events_have_key_events -->
-						<!-- svelte-ignore a11y_no_static_element_interactions -->
-						<span
-							class="absolute text-3xs font-medium truncate max-w-[150px] text-opacity-60 {textColorClass} {editMode
-								? 'cursor-text rounded px-0.5 -mx-0.5 hover:text-opacity-100'
-								: ''}"
-							style="top: -18px; left: 0px;"
-							onclick={editMode
-								? stopPropagation(
-										preventDefault(() => startEditingSummary(group.id, group.summary ?? ''))
-									)
-								: undefined}
-							onpointerdown={editMode ? stopPropagation(preventDefault(() => {})) : undefined}
-							>{group.summary || (editMode ? 'Group' : '')}</span
-						>
-					{/if}
 					{#if editMode}
-						<div class="absolute" style="top: 0px; right: 16px;">
+						<div class="relative" style="margin-top: -8px;">
 							<GroupActionBar
 								note={group.note}
 								color={group.color}
diff --git a/frontend/src/lib/components/graph/MoveHandleButton.svelte b/frontend/src/lib/components/graph/MoveHandleButton.svelte
index b373b6d81f..d077f0d03d 100644
--- a/frontend/src/lib/components/graph/MoveHandleButton.svelte
+++ b/frontend/src/lib/components/graph/MoveHandleButton.svelte
@@ -61,9 +61,9 @@
 
 <button
 	class={twMerge(
-		'center-center p-1 text-secondary  cursor-grab hover:bg-surface-hover hover:text-primary',
+		'center-center p-1 text-secondary shadow-sm bg-surface duration-0 hover:bg-surface-tertiary cursor-grab',
 		visible ? '' : '!hidden',
-		'rounded-md',
+		'shadow-md rounded-md',
 		'touch-none',
 		extraClass
 	)}
diff --git a/frontend/src/lib/components/graph/StepCountTab.svelte b/frontend/src/lib/components/graph/StepCountTab.svelte
index 38bb87fa45..f9b6ad0eb8 100644
--- a/frontend/src/lib/components/graph/StepCountTab.svelte
+++ b/frontend/src/lib/components/graph/StepCountTab.svelte
@@ -24,7 +24,7 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="absolute right-[48px] rounded-t-md px-2 text-3xs font-medium z-[-1] flex items-start gap-0.5 {colorConfig.background} {colorConfig.text} {onExpand
+	class="absolute left-0 rounded-t-md px-2 text-3xs font-medium z-[-1] flex items-start gap-0.5 {colorConfig.background} {colorConfig.text} {onExpand
 		? 'cursor-pointer hover:opacity-80'
 		: ''}"
 	style="top: -20px; height: {short ? 20 : 34}px;"
diff --git a/frontend/src/lib/components/graph/groupEditor.svelte.ts b/frontend/src/lib/components/graph/groupEditor.svelte.ts
index a3e4d8f852..7bbc65fc4c 100644
--- a/frontend/src/lib/components/graph/groupEditor.svelte.ts
+++ b/frontend/src/lib/components/graph/groupEditor.svelte.ts
@@ -261,7 +261,7 @@ export function getGroupEditorContext(): GroupEditorContext | undefined {
 /** Extra vertical space pushed above the topmost node of each group for the tab */
 export const GROUP_HEADER_HEIGHT = 0
 
-const GROUP_TOP_MARGIN = 16
+const GROUP_TOP_MARGIN = 28
 
 /**
  * Compute adjusted node positions for collapsed groups whose note is visible.
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
index 590df532ed..37bdbde547 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
@@ -53,8 +53,7 @@
 		if (data.isCollapsedContainer) return data.containerModules?.length ?? 0
 		const v = data.module.value
 		if (v.type === 'branchall') return v.branches.flatMap((b) => b.modules).length
-		if (v.type === 'branchone')
-			return v.default.length + v.branches.flatMap((b) => b.modules).length
+		if (v.type === 'branchone') return v.default.length + v.branches.flatMap((b) => b.modules).length
 		if (v.type === 'forloopflow' || v.type === 'whileloopflow') return v.modules.length
 		return 0
 	})
@@ -62,7 +61,7 @@
 	// Define context menu items
 	let noteDisabled = $derived(
 		!noteEditorContext?.noteEditor ||
-			(noteEditorContext?.noteEditor?.isNodeOnlyMemberOfGroupNote(data.id) ?? false)
+		(noteEditorContext?.noteEditor?.isNodeOnlyMemberOfGroupNote(data.id) ?? false)
 	)
 
 	let isPreprocessor = $derived(data.id === 'preprocessor')