fix: calculate info popover placement relative to card container

Changed info popover position calculation to use the card container
as reference instead of viewport, ensuring consistent placement within
card boundaries.
This commit is contained in:
sagitchu
2026-03-10 20:11:49 +08:00
parent 6427b830ea
commit f410640862
+13 -2
View File
@@ -388,10 +388,20 @@ export default function NodePage() {
} }
const rect = triggerElement.getBoundingClientRect(); const rect = triggerElement.getBoundingClientRect();
const cardElement = triggerElement.closest("[data-node-card='true']");
const cardRect =
cardElement instanceof HTMLElement
? cardElement.getBoundingClientRect()
: null;
const estimatedPanelWidth = 288; const estimatedPanelWidth = 288;
const viewportPadding = 24; const containerPadding = 16;
const availableLeftSpace = cardRect
? rect.left - cardRect.left
: rect.left;
const nextPlacement: "left" | "bottom" = const nextPlacement: "left" | "bottom" =
rect.left >= estimatedPanelWidth + viewportPadding ? "left" : "bottom"; availableLeftSpace >= estimatedPanelWidth + containerPadding
? "left"
: "bottom";
setInfoPopoverPlacement((prev) => setInfoPopoverPlacement((prev) =>
prev[nodeId] === nextPlacement prev[nodeId] === nextPlacement
@@ -1689,6 +1699,7 @@ export default function NodePage() {
<SortableItem key={node.id} id={node.id}> <SortableItem key={node.id} id={node.id}>
{(listeners) => ( {(listeners) => (
<Card <Card
data-node-card="true"
key={node.id} key={node.id}
className={`group relative overflow-visible shadow-sm border border-divider hover:shadow-md transition-shadow duration-200 h-full flex flex-col ${expiryMeta.accentClassName}`} className={`group relative overflow-visible shadow-sm border border-divider hover:shadow-md transition-shadow duration-200 h-full flex flex-col ${expiryMeta.accentClassName}`}
> >