From 784b701cc548d443bd32e0b9c6162fbaba22c618 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 2 Jul 2024 18:14:38 -0500
Subject: [PATCH] Apply landscape margin to ptz controls on mobile only
 (#12272)

---
 web/src/views/live/LiveCameraView.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index c11c90974..1cde98b5d 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -77,6 +77,7 @@ import {
 import { useNavigate } from "react-router-dom";
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import useSWR from "swr";
+import { cn } from "@/lib/utils";
 
 type LiveCameraViewProps = {
   config?: FrigateConfig;
@@ -525,7 +526,12 @@ function PtzControlPanel({
   );
 
   return (
-    <div className="absolute inset-x-2 bottom-[10%] flex select-none flex-wrap items-center justify-center gap-1 md:left-[50%] md:-translate-x-[50%] md:flex-nowrap sm:landscape:ml-12">
+    <div
+      className={cn(
+        "absolute inset-x-2 bottom-[10%] flex select-none flex-wrap items-center justify-center gap-1 md:left-[50%] md:-translate-x-[50%] md:flex-nowrap",
+        isMobile && "landscape:ml-12",
+      )}
+    >
       {ptz?.features?.includes("pt") && (
         <>
           <Button