From 058e9a3ba0601a047c1be8025df5b8b04bcb560f Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 23 May 2024 08:30:16 -0500
Subject: [PATCH] calculate aspect ratio of container to prevent overflow
 (#11495)

---
 web/src/components/settings/MasksAndZones.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/src/components/settings/MasksAndZones.tsx b/web/src/components/settings/MasksAndZones.tsx
index 09659906a..628f99d5e 100644
--- a/web/src/components/settings/MasksAndZones.tsx
+++ b/web/src/components/settings/MasksAndZones.tsx
@@ -98,8 +98,11 @@ export default function MasksAndZones({
   }, [config, selectedCamera]);
 
   const stretch = true;
-  // may need tweaking for mobile
-  const fitAspect = isDesktop ? 16 / 9 : 3 / 4;
+
+  const fitAspect = useMemo(
+    () => (isDesktop ? containerWidth / containerHeight : 3 / 4),
+    [containerWidth, containerHeight],
+  );
 
   const scaledHeight = useMemo(() => {
     if (containerRef.current && aspectRatio && detectHeight) {