From c009e03c8e654f89739f840c5b374bbb9d1d2982 Mon Sep 17 00:00:00 2001
From: zsviczian <viczian.zsolt@gmail.com>
Date: Sun, 23 Jan 2022 17:28:38 +0100
Subject: [PATCH] fix: Right-click object menu displays partially off-screen
 (#4572) (#4631)

---
 src/components/ContextMenu.tsx |  4 ++++
 src/components/Popover.tsx     | 17 +++++++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
index d64492fc..6936039f 100644
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -37,6 +37,10 @@ const ContextMenu = ({
       top={top}
       left={left}
       fitInViewport={true}
+      offsetLeft={appState.offsetLeft}
+      offsetTop={appState.offsetTop}
+      viewportWidth={appState.width}
+      viewportHeight={appState.height}
     >
       <ul
         className="context-menu"
diff --git a/src/components/Popover.tsx b/src/components/Popover.tsx
index 8a5bf26a..ca47d728 100644
--- a/src/components/Popover.tsx
+++ b/src/components/Popover.tsx
@@ -8,6 +8,10 @@ type Props = {
   children?: React.ReactNode;
   onCloseRequest?(event: PointerEvent): void;
   fitInViewport?: boolean;
+  offsetLeft?: number;
+  offsetTop?: number;
+  viewportWidth?: number;
+  viewportHeight?: number;
 };
 
 export const Popover = ({
@@ -16,6 +20,10 @@ export const Popover = ({
   top,
   onCloseRequest,
   fitInViewport = false,
+  offsetLeft = 0,
+  offsetTop = 0,
+  viewportWidth = window.innerWidth,
+  viewportHeight = window.innerHeight,
 }: Props) => {
   const popoverRef = useRef<HTMLDivElement>(null);
 
@@ -24,17 +32,14 @@ export const Popover = ({
     if (fitInViewport && popoverRef.current) {
       const element = popoverRef.current;
       const { x, y, width, height } = element.getBoundingClientRect();
-
-      const viewportWidth = window.innerWidth;
-      if (x + width > viewportWidth) {
+      if (x + width - offsetLeft > viewportWidth) {
         element.style.left = `${viewportWidth - width}px`;
       }
-      const viewportHeight = window.innerHeight;
-      if (y + height > viewportHeight) {
+      if (y + height - offsetTop > viewportHeight) {
         element.style.top = `${viewportHeight - height}px`;
       }
     }
-  }, [fitInViewport]);
+  }, [fitInViewport, viewportWidth, viewportHeight, offsetLeft, offsetTop]);
 
   useEffect(() => {
     if (onCloseRequest) {