rebase to dev

web/src/hooks/use-handle-dragging.ts

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 
 interface DragHandlerProps {
   contentRef: React.RefObject<HTMLElement>;
@@ -128,6 +128,17 @@ function useDraggableHandler({
     ]
   );
 
+  useEffect(() => {
+    // TODO: determine when we want to do this
+    const handlebar = scrollTimeRef.current;
+    if (handlebar && showHandlebar) {
+      // handlebar.scrollIntoView({
+      //   behavior: "smooth",
+      //   block: "center",
+      // });
+    }
+  }, []);
+
   return { handleMouseDown, handleMouseUp, handleMouseMove };
 }
 

web/src/pages/UIPlayground.tsx

@@ -170,8 +170,9 @@ function UIPlayground() {
 
   return (
     <>
-      <div className="absolute left-0 top-12 bottom-0 right-28 flex flex-wrap content-start gap-2 overflow-y-auto no-scrollbar">
+      <div className="w-full h-full">
-        <div className="relative w-full h-full mt-4 mr-5">
+        <div className="flex h-full">
+          <div className="flex-1 content-start gap-2 overflow-y-auto no-scrollbar mt-4 mr-5">
             <Heading as="h2">UI Playground</Heading>
 
             <Heading as="h4" className="my-5">
@@ -247,8 +248,8 @@ function UIPlayground() {
               </div>
             </div>
           </div>
-      </div>
+
-      <div className="absolute top-12 right-0 bottom-0">
+          <div className="w-[100px] overflow-y-auto no-scrollbar">
             <EventReviewTimeline
               segmentDuration={zoomSettings.segmentDuration} // seconds per segment
               timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
@@ -265,6 +266,8 @@ function UIPlayground() {
               contentRef={contentRef} // optional content ref where previews are, can be used for observing/scrolling later
             />
           </div>
+        </div>
+      </div>
     </>
   );
 }

web/src/views/events/DesktopEventView.tsx

@@ -195,8 +195,8 @@ export default function DesktopEventView({
   }
 
   return (
-    <div className="relative w-full h-full">
+    <div className="flex flex-col w-full h-full">
-      <div className="absolute flex justify-between left-0 top-0 right-0">
+      <div className="flex justify-between mb-2">
         <ToggleGroup
           type="single"
           defaultValue="alert"
@@ -261,14 +261,17 @@ export default function DesktopEventView({
         </Button>
       )}
 
+      <div className="flex h-full overflow-hidden">
         <div
           ref={contentRef}
-        className="absolute left-0 top-12 bottom-0 right-28 flex flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
+          className="flex flex-1 flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
         >
           {currentItems ? (
             currentItems.map((value, segIdx) => {
               const lastRow = segIdx == reviewItems[severity].length - 1;
-            const relevantPreview = Object.values(relevantPreviews || []).find(
+              const relevantPreview = Object.values(
+                relevantPreviews || []
+              ).find(
                 (preview) =>
                   preview.camera == value.camera &&
                   preview.start < value.start_time &&
@@ -297,7 +300,7 @@ export default function DesktopEventView({
             <div ref={lastReviewRef} />
           )}
         </div>
-      <div className="absolute top-12 right-0 bottom-0">
+        <div className="md:w-[100px] overflow-y-auto no-scrollbar">
           <EventReviewTimeline
             segmentDuration={60}
             timestampSpread={15}
@@ -312,6 +315,7 @@ export default function DesktopEventView({
           />
         </div>
       </div>
+    </div>
   );
 }