From 7f633dcc3fb188b5dbda5a646c48288dc7c970df Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 25 Feb 2026 12:24:36 +0000
Subject: [PATCH] feat: offset collapsed group stacked layers by note height

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/lib/components/graph/GroupNodeCard.svelte  |  2 +-
 .../lib/components/graph/graphBuilder.svelte.ts    |  9 ++++++++-
 .../renderers/nodes/CollapsedGroupNode.svelte      | 14 +++++++++-----
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/graph/GroupNodeCard.svelte b/frontend/src/lib/components/graph/GroupNodeCard.svelte
index 33803534fe..eb1deb434c 100644
--- a/frontend/src/lib/components/graph/GroupNodeCard.svelte
+++ b/frontend/src/lib/components/graph/GroupNodeCard.svelte
@@ -89,7 +89,7 @@
 <div
 	class={twMerge(
 		'w-full module cursor-pointer max-w-full',
-		fullWidth ? 'rounded-t-md' : 'shadow-sm border rounded-md  overflow-clip',
+		fullWidth ? 'rounded-t-md' : 'shadow-sm rounded-md  overflow-clip',
 		'bg-surface-tertiary'
 	)}
 	style={fullWidth ? '' : 'width: 275px;'}
diff --git a/frontend/src/lib/components/graph/graphBuilder.svelte.ts b/frontend/src/lib/components/graph/graphBuilder.svelte.ts
index 51ef24e5c1..c7facac24e 100644
--- a/frontend/src/lib/components/graph/graphBuilder.svelte.ts
+++ b/frontend/src/lib/components/graph/graphBuilder.svelte.ts
@@ -415,7 +415,14 @@ export function graphBuilder(
 	simplifiableFlow: SimplifiableFlow | undefined,
 	flowPathForTriggerNode: string | undefined,
 	expandedSubflows: Record<string, FlowModule[]>,
-	collapsedGroups: Array<{ id: string; summary?: string; note?: string; color?: string; collapsed?: boolean; module_ids: string[] }>,
+	collapsedGroups: Array<{
+		id: string
+		summary?: string
+		note?: string
+		color?: string
+		collapsed?: boolean
+		module_ids: string[]
+	}>,
 	showNotes: boolean
 	// triggerProps?: {
 	// 	path?: string
diff --git a/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte
index 469586665b..17ee26cf78 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte
@@ -19,6 +19,7 @@
 
 	let selected = $derived(!!(selectionManager && selectionManager.isNodeSelected(id)))
 	let hover = $state(false)
+	let noteHeight = $state(0)
 
 	let group = $derived(
 		groupEditorContext?.groupEditor.getGroups().find((g) => g.id === data.groupId)
@@ -38,12 +39,12 @@
 		<div class="relative" onmouseenter={() => (hover = true)} onmouseleave={() => (hover = false)}>
 			<!-- Stacked layers behind the card -->
 			<div
-				class="absolute inset-0 top-[4px] left-2 h-9 rounded-md border z-[-1] {colorConfig.background} {borderColorClass}"
-				style="width: 259px;"
+				class="absolute inset-0 left-2 h-9 rounded-md border z-[-1] {colorConfig.background} {borderColorClass}"
+				style="top: {3 + noteHeight}px; width: 259px;"
 			></div>
 			<div
-				class="absolute inset-0 top-[7px] left-4 h-9 rounded-md border z-[-2] {colorConfig.background} {borderColorClass}"
-				style="width: 243px;"
+				class="absolute inset-0 left-4 h-9 rounded-md border z-[-2] {colorConfig.background} {borderColorClass}"
+				style="top: {7 + noteHeight}px; width: 243px;"
 			></div>
 
 			<GroupNodeCard
@@ -59,7 +60,10 @@
 				onSummaryUpdate={(text) =>
 					groupEditorContext?.groupEditor.updateSummary(data.groupId, text)}
 				onNoteUpdate={(text) => groupEditorContext?.groupEditor.updateNote(data.groupId, text)}
-				onHeightChange={(h) => groupEditorContext?.groupEditor.setNoteHeight(data.groupId, h)}
+				onHeightChange={(h) => {
+					noteHeight = h
+					groupEditorContext?.groupEditor.setNoteHeight(data.groupId, h)
+				}}
 			/>
 
 			{#if data.editMode && (hover || selected)}