From 56e5194d72c52af4e13a4bb076392e5e2599c00a Mon Sep 17 00:00:00 2001
From: igneum-labs <337424239+igneum-labs@users.noreply.github.com>
Date: Sun, 4 Oct 2026 11:01:11 +0000
Subject: [PATCH] Live DAG: the tip label picks a free spot around the block so
 it never covers a neighbour on phones

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 site/live.html | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/site/live.html b/site/live.html
index 6ee1ec094..ba579331e 100644
--- a/site/live.html
+++ b/site/live.html
@@ -378,7 +378,14 @@ footer{border-top:1px solid var(--line);padding-block:48px 32px}
       if(hv===b){x.strokeStyle='#F4F1EC';x.lineWidth=1.5;rrect(b.px-h-3,b.py-h-3,S+6,S+6,r+2);x.stroke();}}
     x.font='500 10px IBM Plex Mono, monospace';
     // the chain tip carries its short id; nothing else is labelled unless hovered, pinned or locked
-    if(tip){x.fillStyle='rgba(244,241,236,0.92)';x.textAlign='right';var ly=tip.py-h-6;if(ly<10){ly=tip.py+h+12;}x.fillText(tip.hash.slice(0,8),Math.min(W-4,tip.px+h+2),ly);}
+    if(tip){var lt=tip.hash.slice(0,8),lw=x.measureText(lt).width,lh=11,pad=3;
+      // candidate label boxes around the tip: above-right, above-left, below-right, below-left, left, right; the first that
+      // stays inside the canvas and overlaps no other on-screen block wins, so the id is never drawn over a neighbour
+      var cands=[[tip.px+h+2-lw,tip.py-h-6-lh],[tip.px-h-2-lw,tip.py-h-6-lh],[tip.px+h+2-lw,tip.py+h+4],[tip.px-h-2-lw,tip.py+h+4],[tip.px-h-6-lw,tip.py-lh/2],[tip.px+h+6,tip.py-lh/2]];
+      var pick=null,ci;for(ci=0;ci<cands.length&&!pick;ci++){var cx=cands[ci][0],cy=cands[ci][1];if(cx<G+2||cx+lw>W-2||cy<2||cy+lh>H-2)continue;var clash=false;
+        for(var bi=0;bi<n&&!clash;bi++){var ob=blocks[bi];if(ob===tip||!ob.on)continue;if(cx-pad<ob.px+h&&cx+lw+pad>ob.px-h&&cy-pad<ob.py+h&&cy+lh+pad>ob.py-h)clash=true;}
+        if(!clash)pick=cands[ci];}
+      if(!pick)pick=cands[0];x.fillStyle='rgba(244,241,236,0.92)';x.textAlign='left';x.textBaseline='top';x.fillText(lt,Math.max(G+2,Math.min(W-2-lw,pick[0])),Math.max(2,pick[1]));x.textBaseline='alphabetic';}
     if(fx>G){var ft=lk?'final  #'+lk.hash.slice(0,8):'final',fw=x.measureText(ft).width;x.fillStyle='#FFB35C';
       if(fx-G>fw+14){x.textAlign='right';x.fillText(ft,fx-6,12);}else{x.textAlign='left';x.fillText(ft,fx+6,12);}}
     // tooltip on the canvas, no DOM