From 4e60176f8be3d6025ea0c7d6ab8f14860c27013c Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 18 Apr 2024 23:47:16 -0500
Subject: [PATCH] fix top menu items on mobile

---
 web/src/components/settings/MotionTuner.tsx |  2 +-
 web/src/pages/Settings.tsx                  | 48 +++++++++++----------
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/web/src/components/settings/MotionTuner.tsx b/web/src/components/settings/MotionTuner.tsx
index a63651ee4..fce762df5 100644
--- a/web/src/components/settings/MotionTuner.tsx
+++ b/web/src/components/settings/MotionTuner.tsx
@@ -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;
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 0cbd66dc1..c6a509f90 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -86,32 +86,34 @@ 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">
-        <ToggleGroup
-          className="*:px-3 *:py-4 *:rounded-md"
-          type="single"
-          size="sm"
-          value={pageToggle}
-          onValueChange={(value: SettingsType) => {
-            if (value) {
-              setPageToggle(value);
-            }
-          }}
-        >
-          {Object.values(settingsViews).map((item) => (
-            <ToggleGroupItem
-              key={item}
-              className={`flex items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
-              value={item}
-              aria-label={`Select ${item}`}
-            >
-              <div className="capitalize">{item}</div>
-            </ToggleGroupItem>
-          ))}
-        </ToggleGroup>
+        <div className="flex flex-row overflow-x-auto">
+          <ToggleGroup
+            className="*:px-3 *:py-4 *:rounded-md flex-shrink-0"
+            type="single"
+            size="sm"
+            value={pageToggle}
+            onValueChange={(value: SettingsType) => {
+              if (value) {
+                setPageToggle(value);
+              }
+            }}
+          >
+            {Object.values(settingsViews).map((item) => (
+              <ToggleGroupItem
+                key={item}
+                className={`flex items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
+                value={item}
+                aria-label={`Select ${item}`}
+              >
+                <div className="capitalize">{item}</div>
+              </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}