From 8f4ceea7d9c0da4554666f3216bc8142eb6dcaab Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 6 Nov 2025 10:05:47 -0600
Subject: [PATCH] fixes

---
 .../overlay/detail/SearchDetailDialog.tsx         | 15 ++++++++++-----
 .../components/overlay/detail/TrackingDetails.tsx |  4 ++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index b9e19e7f7..e6c101b16 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -368,7 +368,7 @@ function DialogContentComponent({
         >
           {snapshotElement}
         </div>
-        <div className="flex flex-[2] flex-col gap-4 overflow-hidden">
+        <div className="flex flex-col gap-4 overflow-hidden md:basis-2/5">
           <TabsWithActions
             search={search}
             searchTabs={searchTabs}
@@ -1491,14 +1491,19 @@ export function ObjectSnapshotTab({
   const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
 
   return (
-    <div className={cn("relative w-full", className)}>
+    <div className={cn("relative", isDesktop && "size-full", className)}>
       <ImageLoadingIndicator
         className="absolute inset-0 aspect-video min-h-[60dvh] w-full"
         imgLoaded={imgLoaded}
       />
-      <div className={`${imgLoaded ? "visible" : "invisible"}`}>
+      <div
+        className={cn(
+          "flex size-full items-center",
+          imgLoaded ? "visible" : "invisible",
+        )}
+      >
         <TransformWrapper minScale={1.0} wheel={{ smoothStep: 0.005 }}>
-          <div className="flex flex-col space-y-3">
+          <div className="flex w-full flex-col space-y-3 overflow-hidden">
             <TransformComponent
               wrapperStyle={{
                 width: "100%",
@@ -1511,7 +1516,7 @@ export function ObjectSnapshotTab({
               }}
             >
               {search?.id && (
-                <div className="relative mx-auto">
+                <div className="relative mx-auto flex h-full">
                   <img
                     ref={imgRef}
                     className="mx-auto max-h-[60dvh] rounded-lg bg-background object-contain"
diff --git a/web/src/components/overlay/detail/TrackingDetails.tsx b/web/src/components/overlay/detail/TrackingDetails.tsx
index df4c92c30..ffe5a1076 100644
--- a/web/src/components/overlay/detail/TrackingDetails.tsx
+++ b/web/src/components/overlay/detail/TrackingDetails.tsx
@@ -440,7 +440,7 @@ export function TrackingDetails({
         </div>
       </div>
 
-      <div className={cn(isDesktop && "flex-[2] overflow-hidden")}>
+      <div className={cn(isDesktop && "overflow-hidden md:basis-2/5")}>
         {isDesktop && tabs && (
           <div className="mb-4 flex items-center justify-between">
             <div className="flex-1">{tabs}</div>
@@ -453,7 +453,7 @@ export function TrackingDetails({
         >
           {config?.cameras[event.camera]?.onvif.autotracking
             .enabled_in_config && (
-            <div className="-mt-2 mb-2 text-sm text-danger">
+            <div className="mb-2 text-sm text-danger">
               {t("trackingDetails.autoTrackingTips")}
             </div>
           )}