fix(timeline): stabilize popovers on internal scroll + expand test coverage

B-1: useViewportPopover — ignoreScrollContainers option; scroll events
originating inside the timeline canvas no longer close point-anchor popovers
B-2: AllocationPopover, DemandPopover, NewAllocationPopover — thread
scrollContainerRef through so horizontal timeline scroll is ignored
B-3: AllocationPopover — staleTime 0 so SSE reconnect triggers immediate refetch
B-4: useViewportPopover.test.ts — 6 new tests (scroll close, ignore container,
resize close, style clamping)
B-5: AllocationPopover.test.tsx — loading state + happy-path tests added

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
2026-04-02 20:49:08 +02:00
parent d4641e27aa
commit 8d9e26872b
7 changed files with 326 additions and 4 deletions
@@ -1,5 +1,6 @@
"use client";
import type { RefObject } from "react";
import { createPortal } from "react-dom";
import type { TimelineDemandEntry } from "./TimelineContext.js";
import { formatCents, formatDateLong } from "~/lib/format.js";
@@ -12,6 +13,7 @@ interface DemandPopoverProps {
onFillDemand: (demand: TimelineDemandEntry) => void;
anchorX: number;
anchorY: number;
ignoreScrollContainers?: RefObject<HTMLElement | null>[];
}
export function DemandPopover({
@@ -21,12 +23,14 @@ export function DemandPopover({
onFillDemand,
anchorX,
anchorY,
ignoreScrollContainers,
}: DemandPopoverProps) {
const { ref, style } = useViewportPopover({
anchor: { kind: "point", x: anchorX, y: anchorY },
width: 300,
estimatedHeight: 340,
onClose,
...(ignoreScrollContainers ? { ignoreScrollContainers } : {}),
});
const roleName = demand.roleEntity?.name ?? demand.role ?? "Unspecified";