From 8a8b8817bf1528bb6151c277352e6c24e9e2cc66 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 26 May 2022 15:49:40 +0300
Subject: [PATCH] use the closest scroll parent element in popups

---
 src/common/Popup/Popup.js | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/common/Popup/Popup.js b/src/common/Popup/Popup.js
index 1fa8a3567..c5b42184a 100644
--- a/src/common/Popup/Popup.js
+++ b/src/common/Popup/Popup.js
@@ -7,6 +7,19 @@ const FocusLock = require('react-focus-lock').default;
 const { useRouteFocused } = require('stremio-router');
 const styles = require('./styles');
 
+const getAnchorElement = (element) => {
+    if (element === document.documentElement) {
+        return element;
+    }
+
+    const style = window.getComputedStyle(element);
+    if (style.overflowY.indexOf('auto') !== -1 || style.overflowY.indexOf('scroll') !== -1) {
+        return element;
+    }
+
+    return getAnchorElement(element.parentElement);
+};
+
 const Popup = ({ open, direction, renderLabel, renderMenu, dataset, onCloseRequest, ...props }) => {
     const routeFocused = useRouteFocused();
     const labelRef = React.useRef(null);
@@ -49,14 +62,16 @@ const Popup = ({ open, direction, renderLabel, renderMenu, dataset, onCloseReque
     React.useLayoutEffect(() => {
         if (open) {
             const autoDirection = [];
-            const documentRect = document.documentElement.getBoundingClientRect();
+            const anchor = getAnchorElement(labelRef.current);
+            const anchorRect = anchor.getBoundingClientRect();
+
             const labelRect = labelRef.current.getBoundingClientRect();
             const menuRect = menuRef.current.getBoundingClientRect();
             const labelPosition = {
-                left: labelRect.left - documentRect.left,
-                top: labelRect.top - documentRect.top,
-                right: (documentRect.width + documentRect.left) - (labelRect.left + labelRect.width),
-                bottom: (documentRect.height + documentRect.top) - (labelRect.top + labelRect.height)
+                left: labelRect.left - anchorRect.left,
+                top: labelRect.top - anchorRect.top,
+                right: (anchorRect.width + anchorRect.left) - (labelRect.left + labelRect.width),
+                bottom: (anchorRect.height + anchorRect.top) - (labelRect.top + labelRect.height)
             };
 
             if (menuRect.height <= labelPosition.bottom) {