From b64716c15c28a140a395c06730e4264130c2064e Mon Sep 17 00:00:00 2001
From: findthelorax <findthelorax@gmial.com>
Date: Thu, 16 Apr 2026 11:44:24 -0400
Subject: [PATCH] feature: extend zoom out and border width math

---
 frontend/src/components/canvas/CanvasContainer.tsx | 2 ++
 frontend/src/components/canvas/nodes/BaseNode.tsx  | 7 +++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/canvas/CanvasContainer.tsx b/frontend/src/components/canvas/CanvasContainer.tsx
index 3847dc6..7428492 100644
--- a/frontend/src/components/canvas/CanvasContainer.tsx
+++ b/frontend/src/components/canvas/CanvasContainer.tsx
@@ -89,6 +89,8 @@ export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, o
         panActivationKeyCode="Space"
         selectionMode={SelectionMode.Partial}
         multiSelectionKeyCode={['Meta', 'Control']}
+        minZoom={0.25}
+        maxZoom={2.5}
         snapToGrid
         snapGrid={[8, 8]}
         colorMode={theme.colors.reactFlowColorMode}
diff --git a/frontend/src/components/canvas/nodes/BaseNode.tsx b/frontend/src/components/canvas/nodes/BaseNode.tsx
index 0bacd34..5be7dcf 100644
--- a/frontend/src/components/canvas/nodes/BaseNode.tsx
+++ b/frontend/src/components/canvas/nodes/BaseNode.tsx
@@ -1,5 +1,5 @@
 import { createElement, useEffect } from 'react'
-import { Handle, Position, NodeResizer, useUpdateNodeInternals, type NodeProps, type Node } from '@xyflow/react'
+import { Handle, Position, NodeResizer, useUpdateNodeInternals, useViewport, type NodeProps, type Node } from '@xyflow/react'
 import { Cpu, MemoryStick, HardDrive, type LucideIcon } from 'lucide-react'
 import type { NodeData } from '@/types'
 import { resolveNodeColors } from '@/utils/nodeColors'
@@ -24,6 +24,9 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
   const updateNodeInternals = useUpdateNodeInternals()
   useEffect(() => { updateNodeInternals(id) }, [data.bottom_handles, id, updateNodeInternals])
 
+  const { zoom } = useViewport()
+  const borderWidth = Math.max(1, 1 / zoom)
+
   const activeTheme = useThemeStore((s) => s.activeTheme)
   const hideIp = useCanvasStore((s) => s.hideIp)
   const theme = THEMES[activeTheme]
@@ -44,7 +47,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
       style={{
         background: colors.background,
         borderColor: colors.border,
-        borderWidth: 1,
+        borderWidth,
         boxShadow: isOnline && selected
           ? `0 0 0 1px ${colors.border}, 0 0 10px ${colors.border}2e, 0 0 3px ${colors.border}1a`
           : isOnline