Merge branch 'feat/hud-neighbours' into feat/hud-routes

src/app/features/galaxy-system/galaxy-system-scene.component.ts

@@ -241,6 +241,12 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
   private readonly leaderRef = viewChild.required<ElementRef<SVGLineElement>>('leader');
   private readonly objectCardRef = viewChild<SystemObjectCardComponent, ElementRef<HTMLElement>>(SystemObjectCardComponent, { read: ElementRef });
   private readonly dockRef = viewChild<HudDockComponent, ElementRef<HTMLElement>>(HudDockComponent, { read: ElementRef });
+  /**
+   * The card's own box, looked up when the card changes rather than in the render loop that
+   * draws the leader to it. The host element is a stable wrapper; the panel inside it is what
+   * moves, and it is only replaced when a different body is selected.
+   */
+  private readonly objectCardElement = computed(() => this.objectCardRef()?.nativeElement.querySelector('[data-testid="object-card"]') ?? null);
 
   private readonly raycaster = new THREE.Raycaster();
   private readonly galaxyGroup = new THREE.Group();
@@ -753,7 +759,7 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     const world = member.marker.getWorldPosition(new THREE.Vector3());
     this.labelOverlay?.setSelection(world);
 
-    const card = this.objectCardRef()?.nativeElement.querySelector('[data-testid="object-card"]');
+    const card = this.objectCardElement();
     const canvas = this.canvasRef().nativeElement;
     const projected = world.clone().project(camera);
     if (!card || projected.z > 1) {