fix top menu items on mobile

This commit is contained in:
Josh Hawkins 2024-04-18 23:47:16 -05:00
parent 1940371250
commit 4e60176f8b
2 changed files with 26 additions and 24 deletions

View File

@ -78,7 +78,7 @@ export default function MotionTuner({
}
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
}, [selectedCamera]);
useEffect(() => {
if (!motionSettings.threshold) return;

View File

@ -86,8 +86,9 @@ export default function Settings() {
return (
<div className="size-full p-2 flex flex-col">
<div className="w-full h-11 relative flex justify-between items-center">
<div className="flex flex-row overflow-x-auto">
<ToggleGroup
className="*:px-3 *:py-4 *:rounded-md"
className="*:px-3 *:py-4 *:rounded-md flex-shrink-0"
type="single"
size="sm"
value={pageToggle}
@ -108,10 +109,11 @@ export default function Settings() {
</ToggleGroupItem>
))}
</ToggleGroup>
</div>
{(page == "objects" ||
page == "masks / zones" ||
page == "motion tuner") && (
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 ml-2 flex-shrink-0">
{page == "masks / zones" && (
<ZoneMaskFilterButton
selectedZoneMask={filterZoneMask}