From fb306ed9463c5b23420ddb1c31fc079ab9dc2968 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Fri, 21 Apr 2023 11:27:54 -0600
Subject: [PATCH] Add disclaimer when selecting overlay points

---
 web/src/components/TimelineSummary.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/src/components/TimelineSummary.jsx b/web/src/components/TimelineSummary.jsx
index c25ee2a53..eb341084a 100644
--- a/web/src/components/TimelineSummary.jsx
+++ b/web/src/components/TimelineSummary.jsx
@@ -30,9 +30,9 @@ export default function TimelineSummary({ event, onFrameSelected }) {
   }
 
   return (
-    <div>
+    <div className="flex flex-col">
       <div className="h-14 flex justify-center">
-        <div className="w-1/4 flex flex-row flex-nowrap justify-between">
+        <div className="w-1/4 flex flex-row flex-nowrap justify-between overflow-auto">
           {eventTimeline.map((item, index) =>
             item.class_type == 'visible' || item.class_type == 'gone' ? (
               <Button
@@ -58,6 +58,12 @@ export default function TimelineSummary({ event, onFrameSelected }) {
           )}
         </div>
       </div>
+      {timeIndex >= 0 ? (
+        <div className="bg-gray-500 p-4 m-2 max-w-md self-center">
+          Disclaimer: This data comes from the detect feed but is shown on the recordings, it is unlikely that the
+          streams are perfectly in sync so the bounding box and the footage will not line up perfectly.
+        </div>
+      ) : null}
     </div>
   );
 }