Fixed arrows

projects/script.js

@@ -28,11 +28,20 @@ const pathEls = CONNECTIONS.map(() => {
 //  r1 = bounding rect of source, r2 = bounding rect of target
 //  Both rects are relative to the scene container.
 function manhattanPath(r1, r2) {
-  const x1 = r1.left + r1.width  / 2;   // bottom-center of source
+  let x1 = r1.left + r1.width  / 2;   // bottom-center of source
   const y1 = r1.top  + r1.height + 10;
-  const x2 = r2.left + r2.width  / 2;   // top-center of target
+  let x2 = r2.left + r2.width  / 2;   // top-center of target
   const y2 = r2.top + 5;               // stop 8px above target (arrowhead gap)
 
+  let shift = 5;
+  if (x1 > x2) {
+    x1 -= shift;
+    x2 += shift;
+  } else if (x2 > x1) {
+    x1 += shift;
+    x2 -= shift;
+  }
+
   const ymid = y1 + (y2 - y1) / 2;     // elbow halfway between the two
 
   // M: move to source bottom

projects/style.css

@@ -26,6 +26,7 @@ a {
     font-family: "fmono";
     max-width: 300px;
     filter: drop-shadow(5px 5px 4px #707070);
+    height: fit-content;
 }
 
 .disboxp {