fixed context menu placement so it won't be partially off screen.

1 files changed, 11 insertions, 19 deletions

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index c9908b4b0..6a530e3ae 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -118,27 +118,11 @@ export class ContextMenu extends React.Component {
 
     static readonly buffer = 20;
     get pageX() {
-        const x = this._pageX;
-        if (x < 0) {
-            return 0;
-        }
-        const width = this._width;
-        if (x + width > window.innerWidth - ContextMenu.buffer) {
-            return window.innerWidth - ContextMenu.buffer - width;
-        }
-        return x;
+        return this._pageX + this._width > window.innerWidth - ContextMenu.buffer ? window.innerWidth - ContextMenu.buffer - this._width : Math.max(0, this._pageX);
     }
 
     get pageY() {
-        const y = this._pageY;
-        if (y < 0) {
-            return 0;
-        }
-        const height = this._height;
-        if (y + height > window.innerHeight - ContextMenu.buffer) {
-            return window.innerHeight - ContextMenu.buffer - height;
-        }
-        return y;
+        return this._pageY + this._height > window.innerHeight - ContextMenu.buffer ? window.innerHeight - ContextMenu.buffer - this._height : Math.max(0, this._pageY);
     }
 
     _onDisplay?: () => void = undefined;
@@ -223,7 +207,15 @@ export class ContextMenu extends React.Component {
 
     render() {
         return !this._display ? null : (
-            <div className="contextMenu-cont" style={{ left: this.pageX, ...(this._yRelativeToTop ? { top: this.pageY } : { bottom: this.pageY }) }}>
+            <div
+                className="contextMenu-cont"
+                ref={action((r: any) => {
+                    if (r) {
+                        this._width = Number(getComputedStyle(r).width.replace('px', ''));
+                        this._height = Number(getComputedStyle(r).height.replace('px', ''));
+                    }
+                })}
+                style={{ left: this.pageX, ...(this._yRelativeToTop ? { top: this.pageY } : { bottom: this.pageY }) }}>
                 {!this.itemsNeedSearch ? null : (
                     <span className={'search-icon'}>
                         <span className="icon-background">