From 8c96dfe1d15ca14297cf6a24c5d52aedd53634d6 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 5 Jun 2024 09:53:17 -0500
Subject: [PATCH] Some small layout tweaks for portrait cams and motion review
 (#11766)

* Some small layout tweaks for portrait cams and motion review

* spans

* fix desktop
---
 web/src/views/events/EventView.tsx       | 14 ++++++++------
 web/src/views/live/LiveDashboardView.tsx |  4 ++--
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 8e865316d..1766be745 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";
@@ -869,8 +869,10 @@ function MotionReview({
           ref={contentRef}
           className={cn(
             "no-scrollbar grid w-full grid-cols-1",
-            (reviewCameras.length > 3 || isTablet || isDesktop) &&
-              "grid-cols-2",
+            isMobile && "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",
           )}
         >
@@ -880,10 +882,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 = "md:h-full aspect-tall";
-              spans = "row-span-2";
+              grow = "h-full aspect-tall";
+              spans = "md: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";
             }