From a6034be7097583568bd9357de89006915a204d18 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 5 Apr 2024 08:25:51 -0500
Subject: [PATCH] fix ios z-index scrolling bug

---
 web/src/views/events/EventView.tsx | 47 +++++++++++++++---------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 02e34f0d4..bd14168d0 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -839,31 +839,32 @@ function MotionReview({
             return (
               <div key={camera.name} className={`relative ${spans}`}>
                 {motionData ? (
-                  <PreviewPlayer
-                    key={camera.name}
-                    className={`rounded-2xl ${spans} ${grow}`}
-                    camera={camera.name}
-                    timeRange={currentTimeRange}
-                    startTime={previewStart}
-                    cameraPreviews={relevantPreviews || []}
-                    isScrubbing={scrubbing}
-                    onControllerReady={(controller) => {
-                      videoPlayersRef.current[camera.name] = controller;
-                    }}
-                    onClick={() =>
-                      onOpenRecording({
-                        camera: camera.name,
-                        startTime: currentTime,
-                        severity: "significant_motion",
-                      })
-                    }
-                  />
+                  <>
+                    <PreviewPlayer
+                      className={`rounded-2xl ${spans} ${grow}`}
+                      camera={camera.name}
+                      timeRange={currentTimeRange}
+                      startTime={previewStart}
+                      cameraPreviews={relevantPreviews || []}
+                      isScrubbing={scrubbing}
+                      onControllerReady={(controller) => {
+                        videoPlayersRef.current[camera.name] = controller;
+                      }}
+                      onClick={() =>
+                        onOpenRecording({
+                          camera: camera.name,
+                          startTime: currentTime,
+                          severity: "significant_motion",
+                        })
+                      }
+                    />
+                    <div
+                      className={`review-item-ring pointer-events-none z-20 absolute rounded-lg inset-0 size-full -outline-offset-[2.8px] outline outline-[3px] ${detectionType ? `outline-severity_${detectionType} shadow-severity_${detectionType}` : "outline-transparent duration-500"}`}
+                    />
+                  </>
                 ) : (
                   <Skeleton className={`rounded-2xl ${spans} ${grow}`} />
                 )}
-                <div
-                  className={`review-item-ring pointer-events-none z-10 absolute rounded-lg inset-0 size-full -outline-offset-[2.8px] outline outline-[3px] ${detectionType ? `outline-severity_${detectionType} shadow-severity_${detectionType}` : "outline-transparent duration-500"}`}
-                />
               </div>
             );
           })}
@@ -894,7 +895,7 @@ function MotionReview({
             dense={isMobile}
           />
         ) : (
-          <Skeleton className="rounded-2xl size-full" />
+          <Skeleton className="size-full" />
         )}
       </div>