fix: change node size so that font-size is 1em

frontend/src/lib/components/NodeHeader.svelte

@@ -6,6 +6,10 @@
   export let node: Node;
 
   const setDownSocket = getContext<(socket: Socket) => void>("setDownSocket");
+  const getSocketPosition =
+    getContext<(node: Node, index: number) => [number, number]>(
+      "getSocketPosition",
+    );
 
   function handleMouseDown(event: MouseEvent) {
     event.stopPropagation();
@@ -13,7 +17,7 @@
     setDownSocket({
       node,
       index: 0,
-      position: [node.position.x + 5, node.position.y + 0.625],
+      position: getSocketPosition(node, 0),
     });
   }
 
@@ -22,7 +26,7 @@
   const aspectRatio = 0.25;
 
   const path = createNodePath({
-    depth: 4.5,
+    depth: 4,
     height: 24,
     y: 50,
     cornerTop,
@@ -38,7 +42,7 @@
     aspectRatio,
   });
   const pathHover = createNodePath({
-    depth: 6,
+    depth: 5,
     height: 30,
     y: 50,
     cornerTop,
@@ -56,7 +60,6 @@
     role="button"
     tabindex="0"
     on:mousedown={handleMouseDown}
-    style={`background: var(--node-hovered-out-${node.tmp?.type?.outputs?.[0]}`}
   />
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -69,11 +72,7 @@
       --hover-path: path("${pathHover}");
     `}
   >
-    <path
-      vector-effect="non-scaling-stroke"
-      fill="none"
-      stroke="white"
-      stroke-width="0.1"
+    <path vector-effect="non-scaling-stroke" stroke="white" stroke-width="0.1"
     ></path>
   </svg>
 </div>
@@ -82,18 +81,20 @@
   .wrapper {
     position: relative;
     width: 100%;
-    height: 12.5px;
+    height: 25px;
   }
 
   .click-target {
     position: absolute;
-    right: -2.5px;
-    top: 3.8px;
-    height: 5px;
-    width: 5px;
+    right: 0px;
+    top: 50%;
+    transform: translateX(50%) translateY(-50%);
+    height: 15px;
+    width: 15px;
     z-index: 100;
     border-radius: 50%;
-    opacity: 0.1;
+    /* background: red; */
+    /* opacity: 0.2; */
   }
 
   .click-target:hover + svg path {
@@ -114,14 +115,14 @@
   svg path {
     stroke-width: 0.2px;
     transition: 0.2s;
-    fill: #131313;
+    fill: var(--background-color-lighter);
     stroke: var(--stroke);
     stroke-width: var(--stroke-width);
     d: var(--path);
   }
 
   .content {
-    font-size: 0.5em;
+    font-size: 1em;
     display: flex;
     align-items: center;
     padding-left: 5px;