From 0bed5d1845efa149d87ad1414554ad0804a8b514 Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Sun, 27 Sep 2026 01:01:18 +0200
Subject: [PATCH] feat: frame simplified node icons in a centered badge

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../lib/components/graph/simplified/SimplifiedNode.svelte   | 6 +++---
 .../src/lib/components/graph/simplified/simplifiedLayout.ts | 6 ++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/graph/simplified/SimplifiedNode.svelte b/frontend/src/lib/components/graph/simplified/SimplifiedNode.svelte
index 6cda9b10ad..0f1e9366a1 100644
--- a/frontend/src/lib/components/graph/simplified/SimplifiedNode.svelte
+++ b/frontend/src/lib/components/graph/simplified/SimplifiedNode.svelte
@@ -54,12 +54,12 @@
 			colors.bg,
 			colors.outline
 		)}
-		style="width: {data.width}px; height: {data.height}px; padding: 0 {SIMPLIFIED.paddingX}px; gap: {SIMPLIFIED.iconWidth - 16}px;"
+		style="width: {data.width}px; height: {data.height}px; padding: 0 {SIMPLIFIED.paddingX}px; gap: {SIMPLIFIED.badgeGap}px;"
 		title={data.title}
 	>
 		<div
-			class="shrink-0 flex items-center justify-center text-secondary self-start"
-			style="width: 16px; margin-top: {SIMPLIFIED.paddingY}px; {rowStyle}"
+			class="shrink-0 flex items-center justify-center rounded-md bg-surface-tertiary border border-border-light text-secondary"
+			style="width: {SIMPLIFIED.badgeSize}px; height: {SIMPLIFIED.badgeSize}px;"
 		>
 			{#if data.module}
 				<FlowModuleIcon module={data.module} size={14} />
diff --git a/frontend/src/lib/components/graph/simplified/simplifiedLayout.ts b/frontend/src/lib/components/graph/simplified/simplifiedLayout.ts
index bf36400be6..121ce8e38b 100644
--- a/frontend/src/lib/components/graph/simplified/simplifiedLayout.ts
+++ b/frontend/src/lib/components/graph/simplified/simplifiedLayout.ts
@@ -12,7 +12,9 @@ export const SIMPLIFIED = {
 	minWidth: 150,
 	maxWidth: 340,
 	paddingX: 12,
-	iconWidth: 24,
+	/** The icon's badge, and the space between it and the text */
+	badgeSize: 24,
+	badgeGap: 10,
 	rowHeight: 16,
 	paddingY: 10,
 	colGap: 56,
@@ -195,7 +197,7 @@ function sized(
 	const width = Math.round(
 		Math.min(
 			SIMPLIFIED.maxWidth,
-			Math.max(SIMPLIFIED.minWidth, content + SIMPLIFIED.iconWidth + 2 * SIMPLIFIED.paddingX + 4)
+			Math.max(SIMPLIFIED.minWidth, content + SIMPLIFIED.badgeSize + SIMPLIFIED.badgeGap + 2 * SIMPLIFIED.paddingX + 4)
 		)
 	)
 	const rows = 1 + (meta ? 1 : 0) + (data.detail ? 1 : 0)