From bfa462b31eac06c17ea1b606f994642355aba453 Mon Sep 17 00:00:00 2001
From: Bernt Christian Egeland <bernt.christian.egeland@gmail.com>
Date: Tue, 11 Apr 2023 19:50:23 +0200
Subject: [PATCH] calculate available height

---
 web/src/components/MultiSelect.jsx   |  8 +++++++-
 web/src/components/RelativeModal.jsx | 19 +++++++++++--------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/web/src/components/MultiSelect.jsx b/web/src/components/MultiSelect.jsx
index 3b75dc588..1ff30a231 100644
--- a/web/src/components/MultiSelect.jsx
+++ b/web/src/components/MultiSelect.jsx
@@ -17,6 +17,8 @@ export default function MultiSelect({ className, title, options, selection, onTo
     return selection == 'all' || selection.split(',').indexOf(item) > -1;
   };
 
+  const menuHeight = Math.round(window.innerHeight * 0.55);
+
   return (
     <div className={`${className} p-2`} ref={popupRef}>
       <div className="flex justify-between min-w-[120px]" onClick={() => setState({ showMenu: true })}>
@@ -24,7 +26,11 @@ export default function MultiSelect({ className, title, options, selection, onTo
         <ArrowDropdown className="w-6" />
       </div>
       {state.showMenu ? (
-        <Menu className={`overflow-auto`} relativeTo={popupRef} onDismiss={() => setState({ showMenu: false })}>
+        <Menu
+          className={`max-h-[${menuHeight}px] overflow-auto`}
+          relativeTo={popupRef}
+          onDismiss={() => setState({ showMenu: false })}
+        >
           <div className="flex flex-wrap justify-between items-center">
             <Heading className="p-4 justify-center" size="md">
               {title}
diff --git a/web/src/components/RelativeModal.jsx b/web/src/components/RelativeModal.jsx
index b45b96a07..6ccfccbe1 100644
--- a/web/src/components/RelativeModal.jsx
+++ b/web/src/components/RelativeModal.jsx
@@ -57,7 +57,7 @@ export default function RelativeModal({
         x: relativeToX,
         y: relativeToY,
         width: relativeToWidth,
-        // height: relativeToHeight,
+        height: relativeToHeight,
       } = relativeTo.current.getBoundingClientRect();
 
       const _width = widthRelative ? relativeToWidth : menuWidth;
@@ -78,10 +78,13 @@ export default function RelativeModal({
         newLeft = windowWidth - width - WINDOW_PADDING;
       }
 
-      // too close to bottom
-      if (top + menuHeight > windowHeight - WINDOW_PADDING + window.scrollY) {
-        // If the pop-up modal would extend beyond the bottom of the visible window,
-        // reposition the modal to appear above the clicked icon instead
+      // This condition checks if the menu overflows the bottom of the page and
+      // if there's enough space to position the menu above the clicked icon.
+      // If both conditions are met, the menu will be positioned above the clicked icon
+      if (
+        top + menuHeight > windowHeight - WINDOW_PADDING + window.scrollY &&
+        top - menuHeight - relativeToHeight >= WINDOW_PADDING
+      ) {
         newTop = top - menuHeight;
       }
 
@@ -89,10 +92,10 @@ export default function RelativeModal({
         newTop = WINDOW_PADDING;
       }
 
-      // This calculation checks if there's enough space to display the menu.
+      // This calculation checks if there's enough space below the clicked icon for the menu to fit.
       // If there is, it sets the maxHeight to null(meaning no height constraint). If not, it calculates the maxHeight based on the remaining space in the window
       const maxHeight =
-        windowHeight - WINDOW_PADDING * 2 > menuHeight
+        windowHeight - WINDOW_PADDING * 2 - top > menuHeight
           ? null
           : windowHeight - WINDOW_PADDING * 2 - top + window.scrollY;
 
@@ -121,7 +124,7 @@ export default function RelativeModal({
       <div data-testid="scrim" key="scrim" className="fixed inset-0 z-10" onClick={handleDismiss} />
       <div
         key="menu"
-        className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto h-auto transition-transform transition-opacity duration-75 transform scale-90 opacity-0 overflow-x-hidden overflow-y-auto ${
+        className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto h-auto transition-transform duration-75 transform scale-90 opacity-0 overflow-x-hidden overflow-y-auto ${
           show ? 'scale-100 opacity-100' : ''
         } ${className}`}
         onKeyDown={handleKeydown}