From a5e561c81ddec5fac2ded287b2e534b0c5cb9468 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 3 Mar 2023 16:45:25 -0700
Subject: [PATCH] Restrict menu height to ensure it does not overflow (#5601)

---
 web/src/components/MultiSelect.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/src/components/MultiSelect.jsx b/web/src/components/MultiSelect.jsx
index 99412e938..226316966 100644
--- a/web/src/components/MultiSelect.jsx
+++ b/web/src/components/MultiSelect.jsx
@@ -13,9 +13,11 @@ export default function MultiSelect({ className, title, options, selection, onTo
   const [state, setState] = useState({
     showMenu: false,
   });
-  
+
   const isOptionSelected = (item) => { 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
@@ -26,7 +28,7 @@ export default function MultiSelect({ className, title, options, selection, onTo
         <ArrowDropdown className="w-6" />
       </div>
       {state.showMenu ? (
-        <Menu relativeTo={popupRef} onDismiss={() => setState({ showMenu: false })}>
+        <Menu className={`max-h-[${menuHeight}px] overflow-scroll`} relativeTo={popupRef} onDismiss={() => setState({ showMenu: false })}>
           <div className="flex flex-wrap justify-between items-center">
             <Heading className="p-4 justify-center" size="md">{title}</Heading>
             <Button tabindex="false" className="mx-4" onClick={() => onShowAll() }>