feat: frame simplified node icons in a centered badge

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Diego Imbert
2026-09-27 01:01:18 +02:00
co-authored by Claude Opus 5.5
parent 1683bfbe26
commit 0bed5d1845
2 changed files with 7 additions and 5 deletions
@@ -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} />
@@ -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)