Review segment UI (#9945)

* Add ui for events

* Display data for review items

* Use preview thumbnails

* Implement paging

* Show icons for what was detected

* Show progress bar on preview thumbnail

* Hide the overlays on hover and update reviewed status

* Dim previews that have been reviewed

* Show audio icons

* Cleanup preview thumb player

* initial implementation of review timeline

* Use timeout for hover playback

* Break apart mobile and desktop views

* Show icons for sub labels

* autoplay first video on mobile

* Only show the last 24 hours by default

* Rework scrolling to fix nested scrolling

* Final scroll cleanups

---------

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

web/src/components/timeline/EventReviewTimeline.tsx

@@ -47,7 +47,7 @@ export function EventReviewTimeline({
   const currentTimeRef = useRef<HTMLDivElement>(null);
   const observer = useRef<ResizeObserver | null>(null);
   const timelineDuration = useMemo(
-    () => timelineEnd - timelineStart,
+    () => timelineStart - timelineEnd,
     [timelineEnd, timelineStart]
   );
 
@@ -208,7 +208,7 @@ export function EventReviewTimeline({
   return (
     <div
       ref={timelineRef}
-      className={`relative w-[120px] md:w-[100px] h-[100dvh] overflow-y-scroll no-scrollbar bg-secondary ${
+      className={`relative w-[120px] md:w-[100px] h-full overflow-y-scroll no-scrollbar bg-secondary ${
         isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto"
       }`}
     >