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] 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 8e865316d..5f3d9985b 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 6e847036e..d50dde6f8 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";
             }