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 cardElement = triggerElement.closest("[data-node-card='true']");
const cardRect =
cardElement instanceof HTMLElement
? cardElement.getBoundingClientRect()
: null;
const estimatedPanelWidth = 288;
const viewportPadding = 24;
const containerPadding = 16;
const availableLeftSpace = cardRect
? rect.left - cardRect.left
: rect.left;
const nextPlacement: "left" | "bottom" =
rect.left >= estimatedPanelWidth + viewportPadding ? "left" : "bottom";
availableLeftSpace >= estimatedPanelWidth + containerPadding
? "left"
: "bottom";
setInfoPopoverPlacement((prev) =>
prev[nodeId] === nextPlacement
@@ -1689,6 +1699,7 @@ export default function NodePage() {
<SortableItem key={node.id} id={node.id}>
{(listeners) => (
<Card
data-node-card="true"
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}`}
>