mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-09-29 16:06:36 +08:00
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:
@@ -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}`}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user