From 3098762254d2811ac6abfa40cf529cb4c6b7831e Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 1 Apr 2024 08:20:22 -0500
Subject: [PATCH] separate layout from aspect classes

---
 web/src/views/events/EventView.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 9cdbf2c03..1d494ff24 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -816,20 +816,23 @@ function MotionReview({
         >
           {reviewCameras.map((camera) => {
             let grow;
+            let spans;
             const aspectRatio = camera.detect.width / camera.detect.height;
             if (aspectRatio > 2) {
-              grow = "sm:col-span-2 aspect-wide";
+              grow = "aspect-wide";
+              spans = "sm:col-span-2";
             } else if (aspectRatio < 1) {
-              grow = "md:row-span-2 md:h-full aspect-tall";
+              grow = "md:h-full aspect-tall";
+              spans = "md:row-span-2";
             } else {
               grow = "aspect-video";
             }
             const detectionType = getDetectionType(camera.name);
             return (
-              <div className={`relative ${grow}`}>
+              <div className={`relative ${spans}`}>
                 <PreviewPlayer
                   key={camera.name}
-                  className={`rounded-2xl ${grow}`}
+                  className={`rounded-2xl ${spans} ${grow}`}
                   camera={camera.name}
                   timeRange={currentTimeRange}
                   startTime={previewStart}