fix: address code review findings for React Flow UI integration

- Use screenToFlowPosition() for drop coordinates (fixes zoom/pan bug)
- Remove duplicate selection border from DeviceNode (BaseNode handles it)
- Add w-full to GroupNode for proper container sizing
- Remove unused 'selected' destructuring from DeviceNode

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx

@@ -25,7 +25,7 @@ import type { DeviceNodeData } from '@/components/network/nodes/DeviceNode'
 function DiagramEditorInner() {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
-  const { getNodes, fitView } = useReactFlow()
+  const { getNodes, fitView, screenToFlowPosition } = useReactFlow()
 
   const [diagramId, setDiagramId] = useState<string | null>(id || null)
   const [name, setName] = useState('Untitled Diagram')
@@ -201,13 +201,7 @@ function DiagramEditorInner() {
   const onDrop = useCallback((event: React.DragEvent) => {
     event.preventDefault()
 
-    const reactFlowBounds = (event.target as HTMLElement).closest('.react-flow')?.getBoundingClientRect()
-    if (!reactFlowBounds) return
-
-    const position = {
-      x: event.clientX - reactFlowBounds.left,
-      y: event.clientY - reactFlowBounds.top,
-    }
+    const position = screenToFlowPosition({ x: event.clientX, y: event.clientY })
 
     // Handle device drops
     const deviceRaw = event.dataTransfer.getData('application/reactflow-device')
@@ -256,7 +250,7 @@ function DiagramEditorInner() {
       setNodes(nds => [...nds, newNode])
       setIsDirty(true)
     }
-  }, [setNodes])
+  }, [setNodes, screenToFlowPosition])
 
   const handleNodeUpdate = useCallback((nodeId: string, updates: Partial<DeviceNodeData>) => {
     setNodes(nds => nds.map(n => {