From 7a17711f60acf99e10e39ab8195c73ea9ec8fdfe Mon Sep 17 00:00:00 2001
From: Olov Johansson <johansson.olov@gmail.com>
Date: Sat, 8 Aug 2026 20:34:01 +0200
Subject: [PATCH] fix connector alignment: use spread pct for pins and
 connector lines

---
 game.html | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/game.html b/game.html
index 7106a5f..779b461 100644
--- a/game.html
+++ b/game.html
@@ -899,7 +899,7 @@
                 <template x-for="ev in eventsForProject(item.id)" :key="ev.id">
                   <a class="tl-project-evt-dot"
                      :class="ev.mood || (game && game.mood) || 'light'"
-                     :style="`left:${posPercent(ev.date)}%`"
+                     :style="`left:${spreadPct(ev.id, ev.date)}%`"
                      :href="'#entry-' + ev.id"
                      :title="ev.title + ' — ' + ev.date"
                      @click.stop></a>
@@ -2146,8 +2146,14 @@
           return result.sort((a, b) => a.term.localeCompare(b.term))
         },
 
+        // Spread pct: use the adjusted position from tlItems so connectors/pins
+        // align with the main-rail callout dot (which gets nudged to avoid overlap).
+        spreadPct(evId, fallbackDate) {
+          const item = this.tlItems.find(i => i.id === evId)
+          return item ? item.pct : this.posPercent(fallbackDate)
+        },
+
         // Vertical connector lines from main-rail event dots down to project pins.
-        // SUBLABEL_H ≈ 1rem margin-top + 10px text + 6px margin-bottom = 32px
         projectConnectors() {
           if (!this.game) return []
           const projs = this.projects()
@@ -2158,7 +2164,7 @@
             .map(ev => {
               const idx = projs.findIndex(p => p.id === ev.project_id)
               if (idx === -1) return null
-              const pct  = this.posPercent(ev.date)
+              const pct  = this.spreadPct(ev.id, ev.date)
               const topY = this.tlRailY()
               const pinY = this.tlHeight() + SUBLABEL_H + idx * ROW_H + PIN_LEVEL
               return { id: ev.id, pct, top: topY, height: Math.max(0, pinY - topY) }