UI tweaks (#13711)

* Fix dialog autofocus problems on mobile

* set font size to prevent mobile zooming

* Use arrow keys to navigate Explore view

web/src/components/card/ExportCard.tsx

@@ -2,7 +2,7 @@ import ActivityIndicator from "../indicators/activity-indicator";
 import { LuTrash } from "react-icons/lu";
 import { Button } from "../ui/button";
 import { useCallback, useState } from "react";
-import { isDesktop } from "react-device-detect";
+import { isDesktop, isMobile } from "react-device-detect";
 import { FaDownload, FaPlay, FaShareAlt } from "react-icons/fa";
 import Chip from "../indicators/Chip";
 import { Skeleton } from "../ui/skeleton";
@@ -82,7 +82,13 @@ export default function ExportCard({
           }
         }}
       >
-        <DialogContent>
+        <DialogContent
+          onOpenAutoFocus={(e) => {
+            if (isMobile) {
+              e.preventDefault();
+            }
+          }}
+        >
           <DialogTitle>Rename Export</DialogTitle>
           <DialogDescription>
             Enter a new name for this export.
@@ -90,7 +96,7 @@ export default function ExportCard({
           {editName && (
             <>
               <Input
-                className="mt-3"
+                className="text-md mt-3"
                 type="search"
                 placeholder={editName?.original}
                 value={

web/src/components/filter/CameraGroupSelector.tsx

@@ -710,7 +710,7 @@ export function CameraGroupEdit({
               <FormLabel>Name</FormLabel>
               <FormControl>
                 <Input
-                  className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                  className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                   placeholder="Enter a name..."
                   disabled={editingGroup !== undefined}
                   {...field}

web/src/components/overlay/CreateUserDialog.tsx

@@ -74,7 +74,7 @@ export default function CreateUserDialog({
                   <FormLabel>User</FormLabel>
                   <FormControl>
                     <Input
-                      className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                      className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                       {...field}
                     />
                   </FormControl>
@@ -89,7 +89,7 @@ export default function CreateUserDialog({
                   <FormLabel>Password</FormLabel>
                   <FormControl>
                     <Input
-                      className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                      className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                       type="password"
                       {...field}
                     />

web/src/components/overlay/ExportDialog.tsx

@@ -273,7 +273,7 @@ export function ExportContent({
         />
       )}
       <Input
-        className="my-6"
+        className="text-md my-6"
         type="search"
         placeholder="Name the Export"
         value={name}
@@ -431,7 +431,7 @@ function CustomTimeSelector({
           />
           <SelectSeparator className="bg-secondary" />
           <input
-            className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+            className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
             id="startTime"
             type="time"
             value={startClock}
@@ -493,7 +493,7 @@ function CustomTimeSelector({
           />
           <SelectSeparator className="bg-secondary" />
           <input
-            className="mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+            className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
             id="startTime"
             type="time"
             value={endClock}

web/src/components/overlay/SetPasswordDialog.tsx

@@ -23,12 +23,12 @@ export default function SetPasswordDialog({
 
   return (
     <Dialog open={show} onOpenChange={onCancel}>
-      <DialogContent>
+      <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>Set Password</DialogTitle>
         </DialogHeader>
         <Input
-          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+          className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
           type="password"
           value={password}
           onChange={(event) => setPassword(event.target.value)}

web/src/components/overlay/detail/AnnotationSettingsPane.tsx

@@ -178,7 +178,7 @@ export function AnnotationSettingsPane({
                   <div className="flex flex-col">
                     <FormControl>
                       <Input
-                        className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                        className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                         placeholder="0"
                         {...field}
                       />

web/src/components/settings/ZoneEditPane.tsx

@@ -373,7 +373,7 @@ export default function ZoneEditPane({
                 <FormLabel>Name</FormLabel>
                 <FormControl>
                   <Input
-                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                     placeholder="Enter a name..."
                     {...field}
                   />
@@ -395,7 +395,7 @@ export default function ZoneEditPane({
                 <FormLabel>Inertia</FormLabel>
                 <FormControl>
                   <Input
-                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                     placeholder="3"
                     {...field}
                   />
@@ -417,7 +417,7 @@ export default function ZoneEditPane({
                 <FormLabel>Loitering Time</FormLabel>
                 <FormControl>
                   <Input
-                    className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                     placeholder="0"
                     {...field}
                   />