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"; }