Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Restrict menu height to ensure it does not overflow (#5601)

Browse Source
This commit is contained in:
Nicolas Mowen 2023-03-03 16:45:25 -07:00 committed by GitHub
parent c4ebafe777
commit a5e561c81d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/MultiSelect.jsx
View File

@ -13,9 +13,11 @@ export default function MultiSelect({ className, title, options, selection, onTo
const [state, setState] = useState({ const [state, setState] = useState({
showMenu: false, showMenu: false,
}); });
const isOptionSelected = (item) => { return selection == "all" || selection.split(',').indexOf(item) > -1; } const isOptionSelected = (item) => { return selection == "all" || selection.split(',').indexOf(item) > -1; }
const menuHeight = Math.round(window.innerHeight * 0.55);
return ( return (
<div className={`${className} p-2`} ref={popupRef}> <div className={`${className} p-2`} ref={popupRef}>
<div <div
@ -26,7 +28,7 @@ export default function MultiSelect({ className, title, options, selection, onTo
<ArrowDropdown className="w-6" /> <ArrowDropdown className="w-6" />
</div> </div>
{state.showMenu ? ( {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"> <div className="flex flex-wrap justify-between items-center">
<Heading className="p-4 justify-center" size="md">{title}</Heading> <Heading className="p-4 justify-center" size="md">{title}</Heading>
<Button tabindex="false" className="mx-4" onClick={() => onShowAll() }> <Button tabindex="false" className="mx-4" onClick={() => onShowAll() }>