improve drag

src/components/graph/ConfigNode.tsx

@@ -8,8 +8,8 @@ import {
     BaseNode,
     BaseNodeContent,
     BaseNodeFooter,
-    BaseNodeHeader,
-    BaseNodeHeaderTitle,
+    BaseNodeFooterText,
+    BaseNodeHeaderRow,
 } from './BaseNode'
 import { GitBranchPlus, ScrollText } from 'lucide-react'
 import {
@@ -119,12 +119,14 @@ export const ConfigNode = memo(function ConfigNode({ id, data, width, height }:
     const extensions = useMemo(() => [plantumlLanguage.extension], [])
     const [editorHeight, editorContainerRef] = useResizeHeight(180)
 
+    const dimensions =
+        width != null && height != null && width > 0 && height > 0
+            ? { width, height }
+            : undefined
+
     return (
-        <BaseNode className="min-w-80 min-h-[280px]" style={width != null && height != null && width > 0 && height > 0 ? { width, height } : undefined} resizable nodeId={id} handles={<><InputHandle id="ain" /><OutputHandle id="out" /></>}>
-            <BaseNodeHeader className="border-b">
-                <ScrollText className="size-4" />
-                <BaseNodeHeaderTitle>{id}.puml</BaseNodeHeaderTitle>
-            </BaseNodeHeader>
+        <BaseNode className="min-w-80 min-h-[280px]" dimensions={dimensions} resizable nodeId={id} handles={<><InputHandle id="ain" /><OutputHandle id="out" /></>}>
+            <BaseNodeHeaderRow icon={<ScrollText className="size-4" />} title={`${id}.puml`} />
 
             <BaseNodeContent>
                 {hasDependencies && (
@@ -214,7 +216,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data, width, height }:
             </BaseNodeContent>
 
             <BaseNodeFooter>
-                <div className="w-full text-xs text-muted-foreground">{storedPlantuml ? `${storedPlantuml.length} chars` : 'none'}</div>
+                <BaseNodeFooterText>{storedPlantuml ? `${storedPlantuml.length} chars` : 'none'}</BaseNodeFooterText>
             </BaseNodeFooter>
         </BaseNode>
     )