From ddc5cc18d006203df204d1ee21cec31cf8a5421a Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 7 Sep 2022 15:05:12 -0400
Subject: fixed context menu placement so it won't be partially off screen.

---
 src/client/views/ContextMenu.tsx | 30 +++++++++++-------------------
 1 file changed, 11 insertions(+), 19 deletions(-)

(limited to 'src')

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">
-- 
cgit v1.2.3-70-g09d2