Put a loop's delete button in its label, not between its ends

Every connection puts its × at the midpoint of its two ends, which is on
the curve for an ordinary one. A way back is drawn above the nodes, so
that midpoint landed on whatever connection ran between them - it looked
like that connection's ×, still showing after another was selected.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

src/app/shared/custom-connection/custom-connection.ts

@@ -50,13 +50,21 @@ import { BiasComparisonViewStateService } from '@services/bias/bias-comparison-v
               (keydown)="$event.stopPropagation()"
               (change)="changeLimit($event)" />
           </label>
+          <button
+            type="button"
+            class="connection-delete loop-delete"
+            title="Delete connection"
+            (pointerdown)="deleteConnection($event)"
+            (click)="deleteConnection($event)">
+            <span>×</span>
+          </button>
           } @else {
           <span title="Goes round at most this many times; reaching the limit fails the execution">max {{ maxIterations }}</span>
           }
         </div>
       </foreignObject>
       }
-      @if (isSelected && !isReadonly) {
+      @if (isSelected && !isReadonly && !isLoopBack) {
       <foreignObject
         class="connection-delete-wrap"
         [attr.x]="deleteButtonX"
@@ -144,6 +152,16 @@ import { BiasComparisonViewStateService } from '@services/bias/bias-comparison-v
       line-height: 1;
     }
 
+    /* Its own × sits in the label: the midpoint of its two ends, where other connections put it,
+       is nowhere on a way back drawn above the nodes - it lands on whatever runs between them. */
+    :host .loop-delete {
+      width: 20px;
+      height: 20px;
+      font-size: 15px;
+      box-shadow: none;
+      border: 1px solid #fecaca;
+    }
+
     :host .loop-limit {
       display: inline-flex;
       align-items: center;