diff --git a/frontend/src/components/canvas/CanvasContainer.tsx b/frontend/src/components/canvas/CanvasContainer.tsx
index 57741c7..3f8b91e 100644
--- a/frontend/src/components/canvas/CanvasContainer.tsx
+++ b/frontend/src/components/canvas/CanvasContainer.tsx
@@ -192,6 +192,7 @@ export function CanvasContainer({ onConnect: onConnectProp, onEdgeDoubleClick, o
         colorMode={theme.colors.reactFlowColorMode}
         elevateNodesOnSelect={false}
         connectionMode={ConnectionMode.Loose}
+        connectionRadius={30}
         isValidConnection={isValidConnection}
       >
         <Background
diff --git a/frontend/src/components/canvas/__tests__/BaseNode.test.tsx b/frontend/src/components/canvas/__tests__/BaseNode.test.tsx
index 038fc29..3c948dd 100644
--- a/frontend/src/components/canvas/__tests__/BaseNode.test.tsx
+++ b/frontend/src/components/canvas/__tests__/BaseNode.test.tsx
@@ -119,6 +119,14 @@ describe('BaseNode — borderWidth zoom scaling', () => {
     expect((container.firstChild as HTMLElement).style.borderWidth).toBe('1px')
   })
 
+  // Regression: the node root must NOT clip its own bounds, otherwise the outer
+  // half of each connection handle (which sits centred on the edge) becomes
+  // non-interactive and the "magnet" snap area is halved.
+  it('root does not clip overflow (keeps handles grabbable)', () => {
+    const { container } = renderBaseNode({})
+    expect((container.firstChild as HTMLElement).className).not.toContain('overflow-hidden')
+  })
+
   it('boxShadow glow ring uses borderWidth when selected + online at zoom=0.5', () => {
     mockZoom = 0.5
     const node = makeNode({ status: 'online' })
diff --git a/frontend/src/components/canvas/nodes/BaseNode.tsx b/frontend/src/components/canvas/nodes/BaseNode.tsx
index bce6d6f..fbfda1b 100644
--- a/frontend/src/components/canvas/nodes/BaseNode.tsx
+++ b/frontend/src/components/canvas/nodes/BaseNode.tsx
@@ -56,7 +56,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
 
   return (
     <div
-      className="relative flex flex-col rounded-lg border transition-all duration-200 overflow-hidden"
+      className="relative flex flex-col rounded-lg border transition-all duration-200"
       style={{
         background: colors.background,
         borderColor: colors.border,
@@ -81,7 +81,7 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
         minWidth={140}
         minHeight={50}
         lineStyle={{ borderColor: 'transparent' }}
-        handleStyle={{ borderColor: colors.border, background: colors.border, width: 16, height: 16 }}
+        handleStyle={{ borderColor: colors.border, background: colors.border, width: 8, height: 8, borderRadius: 2 }}
       />
       <SideHandles
         data={data}
diff --git a/frontend/src/components/canvas/nodes/SideHandles.tsx b/frontend/src/components/canvas/nodes/SideHandles.tsx
index ba998a6..98c4592 100644
--- a/frontend/src/components/canvas/nodes/SideHandles.tsx
+++ b/frontend/src/components/canvas/nodes/SideHandles.tsx
@@ -73,7 +73,7 @@ export function SideHandles({
                 type="target"
                 position={POSITION[side]}
                 id={targetId}
-                style={{ ...offset, opacity: 0, width: 12, height: 12 }}
+                style={{ ...offset, opacity: 0, width: 20, height: 20 }}
               />
             </span>
           )
diff --git a/frontend/src/components/canvas/nodes/__tests__/SideHandles.test.tsx b/frontend/src/components/canvas/nodes/__tests__/SideHandles.test.tsx
new file mode 100644
index 0000000..a0f5114
--- /dev/null
+++ b/frontend/src/components/canvas/nodes/__tests__/SideHandles.test.tsx
@@ -0,0 +1,41 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/react'
+import { ReactFlowProvider } from '@xyflow/react'
+import { SideHandles } from '../SideHandles'
+import type { NodeData } from '@/types'
+
+function renderHandles(data: Partial<NodeData> = {}) {
+  const full: NodeData = { label: 'n', type: 'server', status: 'online', services: [], ...data }
+  return render(
+    <ReactFlowProvider>
+      <SideHandles
+        data={full}
+        handleBackground="#30363d"
+        handleBorder="#30363d"
+        labelColor="#8b949e"
+      />
+    </ReactFlowProvider>
+  )
+}
+
+describe('SideHandles', () => {
+  it('renders a source + invisible target handle per slot', () => {
+    // default node: top=1, bottom=1, left=0, right=0
+    const { container } = renderHandles({})
+    expect(container.querySelectorAll('.react-flow__handle.source').length).toBe(2)
+    expect(container.querySelectorAll('.react-flow__handle.target').length).toBe(2)
+  })
+
+  it('target (magnet) handle hit area is large enough to snap onto (20px)', () => {
+    const { container } = renderHandles({})
+    const target = container.querySelector('.react-flow__handle.target') as HTMLElement
+    expect(target.style.width).toBe('20px')
+    expect(target.style.height).toBe('20px')
+    expect(target.style.opacity).toBe('0')
+  })
+
+  it('renders configured per-side counts', () => {
+    const { container } = renderHandles({ top_handles: 2, left_handles: 3, right_handles: 1, bottom_handles: 1 })
+    expect(container.querySelectorAll('.react-flow__handle.source').length).toBe(7)
+  })
+})