From 47e4d7963c15aeedb419f0597dba9d148669ecd5 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Tue, 20 Nov 2018 10:29:40 +0200
Subject: [PATCH] using maxWidth and maxHeight for popup menu to prevent
 dynamic resize overflow

---
 src/common/Popup/Popup.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/common/Popup/Popup.js b/src/common/Popup/Popup.js
index 86ef8f4e8..1c24c524b 100644
--- a/src/common/Popup/Popup.js
+++ b/src/common/Popup/Popup.js
@@ -48,10 +48,6 @@ class Popup extends Component {
     }
 
     updateMenuStyle = () => {
-        if (this.menuRef.current === null || this.labelRef.current === null) {
-            return;
-        }
-
         const bodyRect = document.body.getBoundingClientRect();
         const labelRect = this.labelRef.current.getBoundingClientRect();
         const labelPosition = {
@@ -64,26 +60,30 @@ class Popup extends Component {
 
         if (menuRect.height <= labelPosition.bottom) {
             this.menuRef.current.style.top = `${labelPosition.top + labelRect.height}px`;
+            this.menuRef.current.style.maxHeight = `${labelPosition.bottom}px`;
         } else if (menuRect.height <= labelPosition.top) {
             this.menuRef.current.style.bottom = `${labelPosition.bottom + labelRect.height}px`;
+            this.menuRef.current.style.maxHeight = `${labelPosition.top}px`;
         } else if (labelPosition.bottom >= labelPosition.top) {
             this.menuRef.current.style.top = `${labelPosition.top + labelRect.height}px`;
-            this.menuRef.current.style.height = `${labelPosition.bottom}px`;
+            this.menuRef.current.style.maxHeight = `${labelPosition.bottom}px`;
         } else {
             this.menuRef.current.style.bottom = `${labelPosition.bottom + labelRect.height}px`;
-            this.menuRef.current.style.height = `${labelPosition.top}px`;
+            this.menuRef.current.style.maxHeight = `${labelPosition.top}px`;
         }
 
         if (menuRect.width <= (labelPosition.right + labelRect.width)) {
             this.menuRef.current.style.left = `${labelPosition.left}px`;
+            this.menuRef.current.style.maxWidth = `${labelPosition.right + labelRect.width}px`;
         } else if (menuRect.width <= (labelPosition.left + labelRect.width)) {
             this.menuRef.current.style.right = `${labelPosition.right}px`;
+            this.menuRef.current.style.maxWidth = `${labelPosition.left + labelRect.width}px`;
         } else if (labelPosition.right > labelPosition.left) {
             this.menuRef.current.style.left = `${labelPosition.left}px`;
-            this.menuRef.current.style.width = `${labelPosition.right + labelRect.width}px`;
+            this.menuRef.current.style.maxWidth = `${labelPosition.right + labelRect.width}px`;
         } else {
             this.menuRef.current.style.right = `${labelPosition.right}px`;
-            this.menuRef.current.style.width = `${labelPosition.left + labelRect.width}px`;
+            this.menuRef.current.style.maxWidth = `${labelPosition.left + labelRect.width}px`;
         }
 
         this.menuRef.current.style.visibility = 'visible';