From 35765b90e623f5fc435cd717d99ae8773c3d62bd Mon Sep 17 00:00:00 2001
From: Chaoscaot <max@maxsp.de>
Date: Thu, 1 Jan 2026 17:18:54 +0100
Subject: [PATCH] feat: Refactor connection rendering logic for improved layout
 and offset handling

---
 .../event/ConnectionRenderer.svelte           | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/event/ConnectionRenderer.svelte b/src/components/event/ConnectionRenderer.svelte
index ed5cb02..5b17899 100644
--- a/src/components/event/ConnectionRenderer.svelte
+++ b/src/components/event/ConnectionRenderer.svelte
@@ -55,35 +55,36 @@
             <!-- Apply horizontal offset only to the mid bridge and second segment fan-out; also shift vertical line to keep continuity -->
             {@const midLeft = fromLeft + horizontalDistance / 2 + connection.offset}
             {@const firstSegmentWidth = horizontalDistance / 2}
-            {@const secondSegmentWidth = horizontalDistance / 2}
 
-            <div
-                class="horizontal-line"
-                style="
+            {#if firstSegmentWidth > 0}
+                <div
+                    class="horizontal-line"
+                    style="
                     background-color: {connection.color};
                     left: {fromLeft}px;
                     top: {fromTop + connection.offset / 4}px;
                     width: {firstSegmentWidth + connection.offset + 2}px;
                 "
-            ></div>
-            <div
-                class="vertical-line"
-                style="
+                ></div>
+                <div
+                    class="vertical-line"
+                    style="
                     background-color: {connection.color};
                     left: {midLeft}px;
                     top: {Math.min(fromTop + connection.offset / 4, toTop + connection.offset / 4)}px;
                     height: {Math.abs(toTop + connection.offset / 4 - (fromTop + connection.offset / 4))}px;
                 "
-            ></div>
-            <div
-                class="horizontal-line"
-                style="
+                ></div>
+                <div
+                    class="horizontal-line"
+                    style="
                     background-color: {connection.color};
                     left: {midLeft}px;
                     top: {toTop + connection.offset / 4}px;
-                    width: {secondSegmentWidth - connection.offset}px;
+                    width: {firstSegmentWidth - connection.offset}px;
                 "
-            ></div>
+                ></div>
+            {/if}
         {/each}
     {/key}
 </div>