[CL-1191] - spotlight and popover fixes

libs/components/src/popover/popover-anchor-for.directive.ts

@@ -68,6 +68,12 @@ export class PopoverAnchorForDirective implements OnDestroy {
   /** Padding around the spotlight cutout in pixels */
   readonly spotlightPadding = input<number>(0);
 
+  /**
+   * CSS selector to find a child element within the anchor to use as the spotlight target.
+   * If not provided, the anchor element itself is used.
+   */
+  readonly spotlightTargetSelector = input<string>();
+
   private overlayRef: OverlayRef | null = null;
   private closedEventsSub: Subscription | null = null;
   private readonly hasInitialized = signal(false);
@@ -144,8 +150,13 @@ export class PopoverAnchorForDirective implements OnDestroy {
 
     // Create the spotlight border overlay first so the popover overlay sits above it in DOM order
     if (this.spotlight()) {
+      const selector = this.spotlightTargetSelector();
+      const spotlightEl = selector
+        ? ((this.elementRef.nativeElement.querySelector(selector) as HTMLElement | null) ??
+          this.elementRef.nativeElement)
+        : this.elementRef.nativeElement;
       this.spotlightService.register(this);
-      this.spotlightService.showSpotlight(this.elementRef.nativeElement, this.spotlightPadding());
+      this.spotlightService.showSpotlight(spotlightEl, this.spotlightPadding());
     }
 
     this.popoverOpen.set(true);

libs/components/src/popover/spotlight.service.ts

@@ -18,6 +18,7 @@ export class SpotlightService {
   private currentPadding = 0;
   private borderOverlayRef: OverlayRef | null = null;
   private resizeObserver: ResizeObserver | null = null;
+  private windowResizeListener: (() => void) | null = null;
   private hideTimeout: number | null = null;
   private activePopover: PopoverAnchorForDirective | null = null;
 
@@ -172,11 +173,21 @@ export class SpotlightService {
       this.borderOverlayRef.updatePosition();
     });
     this.resizeObserver.observe(target);
+
+    // Reposition on window resize — CDK's reposition scroll strategy only covers scroll events
+    this.windowResizeListener = () => {
+      this.borderOverlayRef?.updatePosition();
+    };
+    window.addEventListener("resize", this.windowResizeListener);
   }
 
   private disposeBorderOverlay(): void {
     this.resizeObserver?.disconnect();
     this.resizeObserver = null;
+    if (this.windowResizeListener) {
+      window.removeEventListener("resize", this.windowResizeListener);
+      this.windowResizeListener = null;
+    }
     this.borderOverlayRef?.dispose(); // CDK moves borderElement back to document.body
     this.borderOverlayRef = null;
     this.borderElement.style.display = "none";