From 0bf0c0ea07d4c7e30e7f22783fb59bd420577d75 Mon Sep 17 00:00:00 2001
From: Bernt Christian Egeland <bernt.christian.egeland@gmail.com>
Date: Wed, 12 Apr 2023 18:30:24 +0200
Subject: [PATCH] removed the restrict menu height from #5601.

---
 web/src/components/MultiSelect.jsx | 37 +++++++++++++++++-------------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/web/src/components/MultiSelect.jsx b/web/src/components/MultiSelect.jsx
index 226316966..3b75dc588 100644
--- a/web/src/components/MultiSelect.jsx
+++ b/web/src/components/MultiSelect.jsx
@@ -7,54 +7,59 @@ import Button from './Button';
 import CameraIcon from '../icons/Camera';
 
 export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) {
-
   const popupRef = useRef(null);
 
   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);
+  const isOptionSelected = (item) => {
+    return selection == 'all' || selection.split(',').indexOf(item) > -1;
+  };
 
   return (
     <div className={`${className} p-2`} ref={popupRef}>
-      <div
-        className="flex justify-between min-w-[120px]"
-        onClick={() => setState({ showMenu: true })}
-      >
+      <div className="flex justify-between min-w-[120px]" onClick={() => setState({ showMenu: true })}>
         <label>{title}</label>
         <ArrowDropdown className="w-6" />
       </div>
       {state.showMenu ? (
-        <Menu className={`max-h-[${menuHeight}px] overflow-scroll`} relativeTo={popupRef} onDismiss={() => setState({ showMenu: false })}>
+        <Menu className={`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}</Heading>
-            <Button tabindex="false" className="mx-4" onClick={() => onShowAll() }>
+            <Heading className="p-4 justify-center" size="md">
+              {title}
+            </Heading>
+            <Button tabindex="false" className="mx-4" onClick={() => onShowAll()}>
               Show All
             </Button>
           </div>
           {options.map((item) => (
             <div className="flex flex-grow" key={item}>
               <label
-                className={`flex flex-shrink space-x-2 p-1 my-1 min-w-[176px] hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer capitalize text-sm`}>
+                className={`flex flex-shrink space-x-2 p-1 my-1 min-w-[176px] hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer capitalize text-sm`}
+              >
                 <input
                   className="mx-4 m-0 align-middle"
                   type="checkbox"
                   checked={isOptionSelected(item)}
-                  onChange={() => onToggle(item)} />
-                {item.replaceAll("_", " ")}
+                  onChange={() => onToggle(item)}
+                />
+                {item.replaceAll('_', ' ')}
               </label>
               <div className="justify-right">
-                <Button color={isOptionSelected(item) ? "blue" : "black"} type="text" className="max-h-[35px] mx-2" onClick={() => onSelectSingle(item)}>
+                <Button
+                  color={isOptionSelected(item) ? 'blue' : 'black'}
+                  type="text"
+                  className="max-h-[35px] mx-2"
+                  onClick={() => onSelectSingle(item)}
+                >
                   <CameraIcon />
                 </Button>
               </div>
             </div>
           ))}
         </Menu>
-      ): null}
+      ) : null}
     </div>
   );
 }