Miscellaneous Fixes (#21050)

* Don't add to history when opening search dialog

* Update caniuse

* Revamp the history handling for dialog components

* clarify audio transcription docs

* Use titlecase helper

* Allow running object clasasification on stationary objects

* small spacing tweaks for tablets

* require admin role to delete users

* explicitly prevent deletion of admin user

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

web/src/components/mobile/MobilePage.tsx

@@ -13,7 +13,7 @@ import { cn } from "@/lib/utils";
 import { isPWA } from "@/utils/isPWA";
 import { Button } from "@/components/ui/button";
 import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
+import { useHistoryBack } from "@/hooks/use-history-back";
 
 const MobilePageContext = createContext<{
   open: boolean;
@@ -24,15 +24,16 @@ type MobilePageProps = {
   children: React.ReactNode;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  enableHistoryBack?: boolean;
 };
 
 export function MobilePage({
   children,
   open: controlledOpen,
   onOpenChange,
+  enableHistoryBack = true,
 }: MobilePageProps) {
   const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
-  const location = useLocation();
 
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = useCallback(
@@ -46,33 +47,12 @@ export function MobilePage({
     [onOpenChange, setUncontrolledOpen],
   );
 
-  useEffect(() => {
-    let isActive = true;
-
-    if (open && isActive) {
-      window.history.pushState({ isMobilePage: true }, "", location.pathname);
-    }
-
-    const handlePopState = (event: PopStateEvent) => {
-      if (open && isActive) {
-        event.preventDefault();
-        setOpen(false);
-        // Delay replaceState to ensure state updates are processed
-        setTimeout(() => {
-          if (isActive) {
-            window.history.replaceState(null, "", location.pathname);
-          }
-        }, 0);
-      }
-    };
-
-    window.addEventListener("popstate", handlePopState);
-
-    return () => {
-      isActive = false;
-      window.removeEventListener("popstate", handlePopState);
-    };
-  }, [open, setOpen, location.pathname]);
+  // Handle browser back button to close mobile page
+  useHistoryBack({
+    enabled: enableHistoryBack,
+    open,
+    onClose: () => setOpen(false),
+  });
 
   return (
     <MobilePageContext.Provider value={{ open, onOpenChange: setOpen }}>