From 60e40b806447fe052d72fb6233ade6f7ac9c0351 Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Wed, 30 Sep 2026 19:26:50 +0200
Subject: [PATCH] fix: taller trigger chip; node menu and guard badge on the
 card corner, below the header

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../lib/components/assets/AssetGraph/AssetNode.svelte | 11 ++++++++---
 .../components/assets/AssetGraph/NodeFixButton.svelte |  2 +-
 .../components/assets/AssetGraph/assetGraphLayout.ts  |  2 +-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/assets/AssetGraph/AssetNode.svelte b/frontend/src/lib/components/assets/AssetGraph/AssetNode.svelte
index 1d655c2224..b457162f33 100644
--- a/frontend/src/lib/components/assets/AssetGraph/AssetNode.svelte
+++ b/frontend/src/lib/components/assets/AssetGraph/AssetNode.svelte
@@ -251,6 +251,10 @@
 		'bg-surface-accent-selected border-border-selected hover:bg-surface-accent-selected text-accent'
 	let producer = $derived(upstream && 'path' in upstream ? upstream : undefined)
 	let coProducers = $derived(upstream && 'scripts' in upstream ? upstream.scripts : [])
+	let hasHeader = $derived(!!producer || coProducers.length > 0)
+	// The corner controls sit on the card's corner, below the header tab:
+	// -top-2 plus PIPELINE_NODE_HEADER (22px).
+	const CARD_CORNER_TOP = 'top-[14px]'
 	let coSelected = $derived(!!(upstream && 'scripts' in upstream && upstream.selected))
 	let coProducerItems = $derived(
 		upstreamScriptItems(coProducers, (path) => coProducers.find((s) => s.path === path)?.onOpen())
@@ -403,7 +407,7 @@
 	{:else if upstream}
 		{@const trigger = producer?.trigger}
 		{@const chipClass = twMerge(
-			'truncate rounded-md border px-1.5 py-0.5 text-3xs leading-none font-normal',
+			'truncate rounded-md border px-1.5 py-1 text-3xs leading-none font-normal',
 			trigger?.missing
 				? 'border-red-300 dark:border-red-600 text-red-700 dark:text-red-300'
 				: 'border-gray-300 dark:border-gray-600 text-secondary',
@@ -461,7 +465,7 @@
 	<NodeActionsMenu
 		items={menuItems}
 		hover={hovered}
-		kebabClass={showGuardBadge ? '-right-8' : undefined}
+		kebabClass={twMerge(showGuardBadge && '-right-8', hasHeader && CARD_CORNER_TOP)}
 	>
 		<PipelineNodeCard
 			kindLabel={data.noAsset ? 'No asset' : formatAssetKind(asset)}
@@ -474,7 +478,7 @@
 			{selected}
 			tone={data.error ? 'error' : undefined}
 			subtitle={upstream ? upstreamRow : undefined}
-			header={producer || coProducers.length > 0 ? scriptHeader : undefined}
+			header={hasHeader ? scriptHeader : undefined}
 			headerSelected={producer ? !!producer.selected : coSelected}
 			width={data.width}
 			surface={upstream ? 'primary' : 'secondary'}
@@ -605,6 +609,7 @@
 		<div
 			class={twMerge(
 				'absolute -top-2 -right-2 z-10 rounded-full w-5 h-5 grid place-items-center border shadow-sm',
+				hasHeader && CARD_CORNER_TOP,
 				guardClass
 			)}
 			title={guardTitle}
diff --git a/frontend/src/lib/components/assets/AssetGraph/NodeFixButton.svelte b/frontend/src/lib/components/assets/AssetGraph/NodeFixButton.svelte
index 5744ef367c..6e3ba8b8ee 100644
--- a/frontend/src/lib/components/assets/AssetGraph/NodeFixButton.svelte
+++ b/frontend/src/lib/components/assets/AssetGraph/NodeFixButton.svelte
@@ -70,7 +70,7 @@ red fill already says something is wrong.
 		{#snippet trigger()}
 			{#if chip}
 				<span
-					class="flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-3xs leading-none font-normal whitespace-nowrap bg-surface border-red-300 dark:border-red-600 text-red-700 dark:text-red-300 hover:bg-surface-hover"
+					class="flex items-center gap-1 rounded-md border px-1.5 py-1 text-3xs leading-none font-normal whitespace-nowrap bg-surface border-red-300 dark:border-red-600 text-red-700 dark:text-red-300 hover:bg-surface-hover"
 				>
 					<Wrench size={10} class="shrink-0" />
 					{label}
diff --git a/frontend/src/lib/components/assets/AssetGraph/assetGraphLayout.ts b/frontend/src/lib/components/assets/AssetGraph/assetGraphLayout.ts
index d80437c231..26580584e0 100644
--- a/frontend/src/lib/components/assets/AssetGraph/assetGraphLayout.ts
+++ b/frontend/src/lib/components/assets/AssetGraph/assetGraphLayout.ts
@@ -20,7 +20,7 @@ const SIBLING_GAP = NODE.gap.horizontal
 const COMPONENT_GAP = SIBLING_GAP * 2
 
 /** Extra height of an assets-only node: the trigger chip under its title. */
-export const PIPELINE_NODE_EXTRA_ROW = 16
+export const PIPELINE_NODE_EXTRA_ROW = 20
 /** Height of the header strip naming an assets-only node's producing script. */
 export const PIPELINE_NODE_HEADER = 22
 /** Extra vertical padding of a card under a header, top plus bottom. */