From 5085fa713506acbd8075405733e0b03cc23e1dd3 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 5 Apr 2024 08:44:00 -0500
Subject: [PATCH] UI bugfixes and tweaks (#10848)

* fix ios z-index scrolling bug

* skeleton size
---
 web/src/views/events/EventView.tsx | 51 ++++++++++++++++--------------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index e1d7b24dfa..657d0c7457 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -839,31 +839,34 @@ 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}`} />
+                  <Skeleton
+                    className={`rounded-2xl size-full ${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 +897,7 @@ function MotionReview({
             dense={isMobile}
           />
         ) : (
-          <Skeleton className="rounded-2xl size-full" />
+          <Skeleton className="size-full" />
         )}
       </div>