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/pages/Logs.tsx

@@ -41,7 +41,7 @@ function Logs() {
   }, [logs]);
 
   return (
-    <>
+    <div className="relative w-full h-full overflow-hidden">
       <div className="flex justify-between items-center">
         <Heading className="first:mt-2" as="h2">
           Logs
@@ -76,10 +76,10 @@ function Logs() {
         </div>
       </div>
 
-      <div className="overflow-auto font-mono text-sm bg-secondary rounded my-2 p-2 whitespace-pre-wrap">
+      <div className="absolute left-0 top-16 bottom-2 right-2 overflow-auto font-mono text-sm bg-secondary rounded p-2 whitespace-pre-wrap">
         {logs}
       </div>
-    </>
+    </div>
   );
 }