UI tweaks (#20811)

* camera wizard input mobile font zooming

* ensure the selected page is visible when navigating via url on mobile

* Filter detail stream to only show items from within the review item

* remove incorrect classes causing extra scroll in detail stream

* change button label

* fix mobile menu button highlight issue

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

web/src/components/settings/wizard/Step1NameCamera.tsx

@@ -385,7 +385,7 @@ export default function Step1NameCamera({
                     </FormLabel>
                     <FormControl>
                       <Input
-                        className="h-8"
+                        className="text-md h-8"
                         placeholder={t(
                           "cameraWizard.step1.cameraNamePlaceholder",
                         )}
@@ -475,7 +475,7 @@ export default function Step1NameCamera({
                         </FormLabel>
                         <FormControl>
                           <Input
-                            className="h-8"
+                            className="text-md h-8"
                             placeholder="192.168.1.100"
                             {...field}
                           />
@@ -495,7 +495,7 @@ export default function Step1NameCamera({
                         </FormLabel>
                         <FormControl>
                           <Input
-                            className="h-8"
+                            className="text-md h-8"
                             placeholder={t(
                               "cameraWizard.step1.usernamePlaceholder",
                             )}
@@ -518,7 +518,7 @@ export default function Step1NameCamera({
                         <FormControl>
                           <div className="relative">
                             <Input
-                              className="h-8 pr-10"
+                              className="text-md h-8 pr-10"
                               type={showPassword ? "text" : "password"}
                               placeholder={t(
                                 "cameraWizard.step1.passwordPlaceholder",
@@ -558,7 +558,7 @@ export default function Step1NameCamera({
                       </FormLabel>
                       <FormControl>
                         <Input
-                          className="h-8"
+                          className="text-md h-8"
                           placeholder="rtsp://username:password@host:port/path"
                           {...field}
                         />

web/src/components/timeline/DetailStream.tsx

@@ -458,6 +458,7 @@ function ReviewGroup({
                   <EventList
                     key={event.id}
                     event={event}
+                    review={review}
                     effectiveTime={effectiveTime}
                     annotationOffset={annotationOffset}
                     onSeek={onSeek}
@@ -492,6 +493,7 @@ function ReviewGroup({
 
 type EventListProps = {
   event: Event;
+  review: ReviewSegment;
   effectiveTime?: number;
   annotationOffset: number;
   onSeek: (ts: number, play?: boolean) => void;
@@ -499,6 +501,7 @@ type EventListProps = {
 };
 function EventList({
   event,
+  review,
   effectiveTime,
   annotationOffset,
   onSeek,
@@ -617,6 +620,7 @@ function EventList({
 
         <div className="mt-2">
           <ObjectTimeline
+            review={review}
             eventId={event.id}
             onSeek={handleTimelineClick}
             effectiveTime={effectiveTime}
@@ -765,6 +769,7 @@ function LifecycleItem({
 
 // Fetch and render timeline entries for a single event id on demand.
 function ObjectTimeline({
+  review,
   eventId,
   onSeek,
   effectiveTime,
@@ -772,6 +777,7 @@ function ObjectTimeline({
   startTime,
   endTime,
 }: {
+  review: ReviewSegment;
   eventId: string;
   onSeek: (ts: number, play?: boolean) => void;
   effectiveTime?: number;
@@ -780,13 +786,27 @@ function ObjectTimeline({
   endTime?: number;
 }) {
   const { t } = useTranslation("views/events");
-  const { data: timeline, isValidating } = useSWR<TrackingDetailsSequence[]>([
+  const { data: fullTimeline, isValidating } = useSWR<
+    TrackingDetailsSequence[]
+  >([
     "timeline",
     {
       source_id: eventId,
     },
   ]);
 
+  const timeline = useMemo(() => {
+    if (!fullTimeline) {
+      return fullTimeline;
+    }
+
+    return fullTimeline.filter(
+      (t) =>
+        t.timestamp >= review.start_time &&
+        (review.end_time == undefined || t.timestamp <= review.end_time),
+    );
+  }, [fullTimeline, review]);
+
   if (isValidating && (!timeline || timeline.length === 0)) {
     return <ActivityIndicator className="ml-2 size-3" />;
   }

web/src/pages/Settings.tsx

@@ -157,9 +157,11 @@ function MobileMenuItem({
   const { t } = useTranslation(["views/settings"]);
 
   return (
-    <Button
+    <div
-      variant="ghost"
+      className={cn(
-      className={cn("w-full justify-between pr-2", className)}
+        "inline-flex h-10 w-full cursor-pointer items-center justify-between whitespace-nowrap rounded-md px-4 py-2 pr-2 text-sm font-medium text-primary-variant disabled:pointer-events-none disabled:opacity-50",
+        className,
+      )}
       onClick={() => {
         onSelect(item.key);
         onClose?.();
@@ -167,7 +169,7 @@ function MobileMenuItem({
     >
       <div className="smart-capitalize">{t("menu." + item.key)}</div>
       <LuChevronRight className="size-4" />
-    </Button>
+    </div>
   );
 }
 
@@ -273,6 +275,9 @@ export default function Settings() {
       } else {
         setPageToggle(page as SettingsType);
       }
+      if (isMobile) {
+        setContentMobileOpen(true);
+      }
     }
     // don't clear url params if we're creating a new object mask
     return !(searchParams.has("object_mask") || searchParams.has("event_id"));
@@ -282,6 +287,9 @@ export default function Settings() {
     const cameraNames = cameras.map((c) => c.name);
     if (cameraNames.includes(camera)) {
       setSelectedCamera(camera);
+      if (isMobile) {
+        setContentMobileOpen(true);
+      }
     }
     // don't clear url params if we're creating a new object mask or trigger
     return !(searchParams.has("object_mask") || searchParams.has("event_id"));

web/src/views/recording/RecordingView.tsx

@@ -970,7 +970,6 @@ function Timeline({
         "relative overflow-hidden",
         isDesktop
           ? cn(
-              "no-scrollbar overflow-y-auto",
               timelineType == "timeline"
                 ? "w-[100px] flex-shrink-0"
                 : timelineType == "detail"

web/src/views/settings/CameraSettingsView.tsx

@@ -717,11 +717,11 @@ export default function CameraSettingsView({
                   <div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[25%]">
                     <Button
                       className="flex flex-1"
-                      aria-label={t("button.cancel", { ns: "common" })}
+                      aria-label={t("button.reset", { ns: "common" })}
                       onClick={onCancel}
                       type="button"
                     >
-                      <Trans>button.cancel</Trans>
+                      <Trans>button.reset</Trans>
                     </Button>
                     <Button
                       variant="select"