From 7436d8cb114515a4ec60012f51c3449bc06958c4 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 5 Jun 2024 09:18:02 -0500
Subject: [PATCH 1/3] Some small layout tweaks for portrait cams and motion
 review

---
 web/src/views/events/EventView.tsx       | 11 ++++++-----
 web/src/views/live/LiveDashboardView.tsx |  4 ++--
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 8e865316df..5f3d9985b3 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -29,7 +29,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { isDesktop, isMobile, isTablet } from "react-device-detect";
+import { isDesktop, isMobile } from "react-device-detect";
 import { LuFolderCheck } from "react-icons/lu";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
@@ -868,9 +868,10 @@ function MotionReview({
         <div
           ref={contentRef}
           className={cn(
-            "no-scrollbar grid w-full grid-cols-1",
-            (reviewCameras.length > 3 || isTablet || isDesktop) &&
-              "grid-cols-2",
+            "no-scrollbar grid w-full grid-cols-1 landscape:grid-cols-2",
+            reviewCameras.length > 3 &&
+              isMobile &&
+              "portrait:md:grid-cols-2 landscape:md:grid-cols-3",
             "gap-2 overflow-auto px-1 md:mx-2 md:gap-4 xl:grid-cols-3 3xl:grid-cols-4",
           )}
         >
@@ -882,7 +883,7 @@ function MotionReview({
               grow = "aspect-wide";
               spans = reviewCameras.length > 3 && "col-span-2";
             } else if (aspectRatio < 1) {
-              grow = "md:h-full aspect-tall";
+              grow = "h-full aspect-tall";
               spans = "row-span-2";
             } else {
               grow = "aspect-video";
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index 6e847036ec..d50dde6f8a 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -255,7 +255,7 @@ export default function LiveDashboardView({
                 if (aspectRatio > 2) {
                   return `${mobileLayout == "grid" && "col-span-2"} aspect-wide`;
                 } else if (aspectRatio < 1) {
-                  return `${mobileLayout == "grid" && "row-span-2 md:h-full"} aspect-tall`;
+                  return `${mobileLayout == "grid" && "row-span-2 h-full"} aspect-tall`;
                 } else {
                   return "aspect-video";
                 }
@@ -276,7 +276,7 @@ export default function LiveDashboardView({
             if (aspectRatio > 2) {
               grow = `${mobileLayout == "grid" && "col-span-2"} aspect-wide`;
             } else if (aspectRatio < 1) {
-              grow = `${mobileLayout == "grid" && "row-span-2 md:h-full"} aspect-tall`;
+              grow = `${mobileLayout == "grid" && "row-span-2 h-full"} aspect-tall`;
             } else {
               grow = "aspect-video";
             }

From cb89db8c7ba0e87e0beb142e4a7fac24386f0c17 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 5 Jun 2024 09:41:14 -0500
Subject: [PATCH 2/3] spans

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

diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 5f3d9985b3..a6dda01053 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -881,10 +881,10 @@ function MotionReview({
             const aspectRatio = camera.detect.width / camera.detect.height;
             if (aspectRatio > 2) {
               grow = "aspect-wide";
-              spans = reviewCameras.length > 3 && "col-span-2";
+              spans = "sm:col-span-2";
             } else if (aspectRatio < 1) {
               grow = "h-full aspect-tall";
-              spans = "row-span-2";
+              spans = "md:row-span-2";
             } else {
               grow = "aspect-video";
             }

From 1566a44da6d9f0c09effba44052288bffd591151 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 5 Jun 2024 09:46:40 -0500
Subject: [PATCH 3/3] fix desktop

---
 web/src/views/events/EventView.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index a6dda01053..1766be745f 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -868,7 +868,8 @@ function MotionReview({
         <div
           ref={contentRef}
           className={cn(
-            "no-scrollbar grid w-full grid-cols-1 landscape:grid-cols-2",
+            "no-scrollbar grid w-full grid-cols-1",
+            isMobile && "landscape:grid-cols-2",
             reviewCameras.length > 3 &&
               isMobile &&
               "portrait:md:grid-cols-2 landscape:md:grid-cols-3",