From 390b65fde1fc9fb1d894270b23ffc58d4bc00eba Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 26 Dec 2025 06:55:17 -0600
Subject: [PATCH] apply aspect ratio and margin constraints to path overlay in
 detail stream on mobile

improves a specific case where the overlay was not aligned with 4:3 cameras on mobile phones
---
 web/src/components/player/HlsVideoPlayer.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index b254b7f8b..22eef83a2 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -356,7 +356,17 @@ export default function HlsVideoPlayer({
           loadedMetadata &&
           videoDimensions.width > 0 &&
           videoDimensions.height > 0 && (
-            <div className="absolute z-50 size-full">
+            <div
+              className={cn(
+                "absolute inset-0 z-50",
+                isDesktop
+                  ? "size-full"
+                  : "mx-auto flex items-center justify-center portrait:max-h-[50dvh]",
+              )}
+              style={{
+                aspectRatio: `${videoDimensions.width} / ${videoDimensions.height}`,
+              }}
+            >
               <ObjectTrackOverlay
                 key={`overlay-${currentTime}`}
                 camera={camera}