1 files changed, 30 insertions, 17 deletions

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 39ccb55b0..30ac23adf 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -11,13 +11,15 @@ library.add(faSearch);
 
 @observer
 export class ContextMenu extends React.Component {
-    static Instance: ContextMenu
+    static Instance: ContextMenu;
 
     @observable private _items: Array<ContextMenuProps> = [{ description: "test", event: (e: React.MouseEvent) => e.preventDefault(), icon: "smile" }];
     @observable private _pageX: number = 0;
     @observable private _pageY: number = 0;
     @observable private _display: string = "none";
     @observable private _searchString: string = "";
+    // afaik displaymenu can be called before all the items are added to the menu, so can't determine in displayMenu what the height of the menu will be
+    @observable private _yRelativeToTop: boolean = true;
 
 
     private ref: React.RefObject<HTMLDivElement>;
@@ -25,15 +27,15 @@ export class ContextMenu extends React.Component {
     constructor(props: Readonly<{}>) {
         super(props);
 
-        this.ref = React.createRef()
+        this.ref = React.createRef();
 
         ContextMenu.Instance = this;
     }
 
     @action
     clearItems() {
-        this._items = []
-        this._display = "none"
+        this._items = [];
+        this._display = "none";
     }
 
     @action
@@ -50,18 +52,28 @@ 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 + 1/*for search box*/) * 34 + 30);
+
+        this._pageX = x > maxX ? maxX : x;
+        this._pageY = y > maxY ? maxY : y;
 
         this._searchString = "";
 
-        this._display = "flex"
+        this._display = "flex";
     }
 
     intersects = (x: number, y: number): boolean => {
         if (this.ref.current && this._display !== "none") {
-            if (x >= this._pageX && x <= this._pageX + this.ref.current.getBoundingClientRect().width) {
-                if (y >= this._pageY && y <= this._pageY + this.ref.current.getBoundingClientRect().height) {
+            let menuSize = { width: this.ref.current.getBoundingClientRect().width, height: this.ref.current.getBoundingClientRect().height };
+
+            let upperLeft = { x: this._pageX, y: this._yRelativeToTop ? this._pageY : window.innerHeight - (this._pageY + menuSize.height) };
+            let bottomRight = { x: this._pageX + menuSize.width, y: this._yRelativeToTop ? this._pageY + menuSize.height : window.innerHeight - this._pageY };
+
+            if (x >= upperLeft.x && x <= bottomRight.x) {
+                if (y >= upperLeft.y && y <= bottomRight.y) {
                     return true;
                 }
             }
@@ -70,22 +82,23 @@ export class ContextMenu extends React.Component {
     }
 
     render() {
+        let style = this._yRelativeToTop ? { left: this._pageX, top: this._pageY, display: this._display } :
+            { left: this._pageX, bottom: this._pageY, display: this._display };
+
+
         return (
-            <div className="contextMenu-cont" style={{ left: this._pageX, top: this._pageY, display: this._display }} ref={this.ref}>
+            <div className="contextMenu-cont" style={style} ref={this.ref}>
                 <span>
                     <span className="icon-background">
                         <FontAwesomeIcon icon="circle" size="lg" />
                         <FontAwesomeIcon icon="search" size="lg" />
                     </span>
-                    <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange} ></input>
+                    <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange} />
                 </span>
-                {this._items.filter(prop => {
-                    return prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1;
-                }).map(prop => {
-                    return <ContextMenuItem {...prop} key={prop.description} />
-                })}
+                {this._items.filter(prop => prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1).
+                    map(prop => <ContextMenuItem {...prop} key={prop.description} />)}
             </div>
-        )
+        );
     }
 
     @action