changed context menu so that it doesn't zoom in too much when screen width is large and bounded it to screen

2 files changed, 12 insertions, 5 deletions

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index ea40c8e99..41994ef79 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -26,7 +26,8 @@
     border-bottom-style: solid;
     padding: 10px;
     white-space: nowrap;
-    font-size: 1.5vw;
+   // font-size: 1.5vw;
+   font-size: 12px;
 }
 
 .contextMenu-item:hover {
@@ -35,7 +36,7 @@
 }
 
 .contextMenu-description {
-    font-size: 1.5vw;
+   // font-size: 1.5vw;
     text-align: left;
-    width: 8vw;
+   // width: 8vw;
 }
\ No newline at end of file
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index fcb934860..12352c667 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -44,8 +44,13 @@ export class ContextMenu extends React.Component {
 
     @action
     displayMenu(x: number, y: number) {
-        this._pageX = x
-        this._pageY = y
+        //maxX and maxY will change if the UI/font size changes, but will work for any amount
+        //of items added to the menu
+        let maxX = window.innerWidth - 150;
+        let maxY = window.innerHeight - (this._items.length * 34 + 30);
+
+        this._pageX = x > maxX ? maxX : x;
+        this._pageY = y > maxY ? maxY : y;
 
         this._searchString = "";
 
@@ -64,6 +69,7 @@ export class ContextMenu extends React.Component {
     }
 
     render() {
+
         return (
             <div className="contextMenu-cont" style={{ left: this._pageX, top: this._pageY, display: this._display }} ref={this.ref}>
                 <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange}></input>