From fcc12f15cdee24c173d6ceae19f6a8d2165b47f0 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 1 Nov 2025 08:45:25 -0500
Subject: [PATCH] layout tweaks

---
 .../overlay/detail/SearchDetailDialog.tsx     |  5 +-
 .../overlay/detail/TrackingDetails.tsx        | 49 ++++++++++---------
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index 1ee4819ae..ee63a0c50 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -391,10 +391,7 @@ export default function SearchDetailDialog({
                 </>
               )}
               {page == "tracking_details" && (
-                <TrackingDetails
-                  className="w-full overflow-x-hidden"
-                  event={search as unknown as Event}
-                />
+                <TrackingDetails event={search as unknown as Event} />
               )}
             </>
           )}
diff --git a/web/src/components/overlay/detail/TrackingDetails.tsx b/web/src/components/overlay/detail/TrackingDetails.tsx
index abfef1634..4becf263c 100644
--- a/web/src/components/overlay/detail/TrackingDetails.tsx
+++ b/web/src/components/overlay/detail/TrackingDetails.tsx
@@ -301,31 +301,36 @@ export function TrackingDetails({
 
       <div
         className={cn(
-          "relative flex items-center justify-center",
-          cameraAspect === "wide"
-            ? "w-full flex-1"
-            : cameraAspect === "tall"
-              ? "max-h-[50dvh] lg:max-h-[70dvh]"
-              : isDesktop && "w-full flex-[3]",
+          "flex w-full items-center justify-center",
+          isDesktop && "overflow-hidden",
+          cameraAspect === "tall" ? "max-h-[50dvh] lg:max-h-[70dvh]" : "w-full",
+          cameraAspect !== "tall" && isDesktop && "flex-[3]",
         )}
         style={{ aspectRatio: aspectRatio }}
         ref={containerRef}
       >
-        <HlsVideoPlayer
-          videoRef={videoRef}
-          containerRef={containerRef}
-          visible={true}
-          currentSource={videoSource}
-          hotKeys={false}
-          supportsFullscreen={false}
-          fullscreen={false}
-          frigateControls={true}
-          onTimeUpdate={handleTimeUpdate}
-          onSeekToTime={handleSeekToTime}
-          isDetailMode={true}
-          camera={event.camera}
-          currentTimeOverride={currentTime}
-        />
+        <div
+          className={cn(
+            "relative",
+            cameraAspect === "tall" ? "h-full" : "w-full",
+          )}
+        >
+          <HlsVideoPlayer
+            videoRef={videoRef}
+            containerRef={containerRef}
+            visible={true}
+            currentSource={videoSource}
+            hotKeys={false}
+            supportsFullscreen={false}
+            fullscreen={false}
+            frigateControls={true}
+            onTimeUpdate={handleTimeUpdate}
+            onSeekToTime={handleSeekToTime}
+            isDetailMode={true}
+            camera={event.camera}
+            currentTimeOverride={currentTime}
+          />
+        </div>
       </div>
 
       <div className={cn(isDesktop && "flex-[2] overflow-hidden")}>
@@ -335,7 +340,7 @@ export function TrackingDetails({
             isDesktop && "scrollbar-container h-full overflow-y-auto",
           )}
         >
-          <div className="mt-3 flex flex-row items-center justify-between">
+          <div className="flex flex-row items-center justify-between">
             <Heading as="h4">{t("trackingDetails.title")}</Heading>
 
             <div className="flex flex-row gap-2">