From a076d5c83d84f8ca9ad63c5c1d5dadb9f258314f Mon Sep 17 00:00:00 2001
From: "Ian Clarke (aider)" <ian.clarke@gmail.com>
Date: Fri, 6 Dec 2024 12:13:58 -0600
Subject: [PATCH] feat: Add larger invisible touch target for nodes in
 visualization

---
 .../layouts/shortcodes/summary-delta-sync/propagation.html  | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/hugo-site/layouts/shortcodes/summary-delta-sync/propagation.html b/hugo-site/layouts/shortcodes/summary-delta-sync/propagation.html
index 70ba6854..804f4b02 100644
--- a/hugo-site/layouts/shortcodes/summary-delta-sync/propagation.html
+++ b/hugo-site/layouts/shortcodes/summary-delta-sync/propagation.html
@@ -281,6 +281,12 @@
         .attr("transform", (d) => `translate(${d.x},${d.y})`)
         .attr("id", (d) => `node-${d.data.id}`);
 
+      // Add invisible larger circle for better touch targets
+      node.append("circle")
+        .attr("r", params.nodeSize * 1.5) // 50% larger than visible node
+        .attr("fill", "transparent")
+        .style("cursor", "pointer");
+
       // Initialize node colors and event handlers
       node.each(function (d) {
         const nodeGroup = d3.select(this);