From 2376bcaf977652152e03131bff45ab0320094cac Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 7 Nov 2025 09:33:59 -0600
Subject: [PATCH] fix mobilepage in tracked object details

---
 .../overlay/detail/SearchDetailDialog.tsx     | 72 ++++++++++---------
 .../overlay/detail/TrackingDetails.tsx        |  3 +-
 2 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index c5702320b1..5fe5df2263 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -306,7 +306,7 @@ function DialogContentComponent({
   if (page === "tracking_details") {
     return (
       <TrackingDetails
-        className={cn("size-full", !isDesktop && "flex flex-col gap-4")}
+        className={cn(isDesktop ? "size-full" : "flex flex-col gap-4")}
         event={search as unknown as Event}
         tabs={
           isDesktop ? (
@@ -584,7 +584,7 @@ export default function SearchDetailDialog({
             "scrollbar-container overflow-y-auto",
             isDesktop &&
               "max-h-[95dvh] sm:max-w-xl md:max-w-4xl lg:max-w-[70%]",
-            isMobile && "px-4",
+            isMobile && "flex h-full flex-col px-4",
           )}
           onInteractOutside={(e) => {
             if (isPopoverOpen) {
@@ -596,7 +596,7 @@ export default function SearchDetailDialog({
             }
           }}
         >
-          <Header>
+          <Header className={cn(!isDesktop && "top-0 mb-0")}>
             <Title>{t("trackedObjectDetails")}</Title>
             <Description className="sr-only">
               {t("trackedObjectDetails")}
@@ -604,39 +604,41 @@ export default function SearchDetailDialog({
             </Description>
           </Header>
 
-          {!isDesktop && (
-            <div className="flex w-full flex-col justify-center gap-4">
-              <TabsWithActions
-                search={search}
-                searchTabs={searchTabs}
-                pageToggle={pageToggle}
-                setPageToggle={setPageToggle}
-                config={config}
-                setSearch={setSearch}
-                setSimilarity={setSimilarity}
-                isPopoverOpen={isPopoverOpen}
-                setIsPopoverOpen={setIsPopoverOpen}
-                dialogContainer={dialogContainer}
-              />
-            </div>
-          )}
+          <div className="flex-1">
+            {!isDesktop && (
+              <div className="flex w-full flex-col justify-center gap-4">
+                <TabsWithActions
+                  search={search}
+                  searchTabs={searchTabs}
+                  pageToggle={pageToggle}
+                  setPageToggle={setPageToggle}
+                  config={config}
+                  setSearch={setSearch}
+                  setSimilarity={setSimilarity}
+                  isPopoverOpen={isPopoverOpen}
+                  setIsPopoverOpen={setIsPopoverOpen}
+                  dialogContainer={dialogContainer}
+                />
+              </div>
+            )}
 
-          <DialogContentComponent
-            page={page}
-            search={search}
-            isDesktop={isDesktop}
-            apiHost={apiHost}
-            config={config}
-            searchTabs={searchTabs}
-            pageToggle={pageToggle}
-            setPageToggle={setPageToggle}
-            setSearch={setSearch}
-            setInputFocused={setInputFocused}
-            setSimilarity={setSimilarity}
-            isPopoverOpen={isPopoverOpen}
-            setIsPopoverOpen={setIsPopoverOpen}
-            dialogContainer={dialogContainer}
-          />
+            <DialogContentComponent
+              page={page}
+              search={search}
+              isDesktop={isDesktop}
+              apiHost={apiHost}
+              config={config}
+              searchTabs={searchTabs}
+              pageToggle={pageToggle}
+              setPageToggle={setPageToggle}
+              setSearch={setSearch}
+              setInputFocused={setInputFocused}
+              setSimilarity={setSimilarity}
+              isPopoverOpen={isPopoverOpen}
+              setIsPopoverOpen={setIsPopoverOpen}
+              dialogContainer={dialogContainer}
+            />
+          </div>
         </Content>
       </Overlay>
     </DetailStreamProvider>
diff --git a/web/src/components/overlay/detail/TrackingDetails.tsx b/web/src/components/overlay/detail/TrackingDetails.tsx
index 95d3cb1f00..74c5d1f7ef 100644
--- a/web/src/components/overlay/detail/TrackingDetails.tsx
+++ b/web/src/components/overlay/detail/TrackingDetails.tsx
@@ -352,7 +352,8 @@ export function TrackingDetails({
       className={cn(
         isDesktop
           ? "flex size-full justify-evenly gap-4 overflow-hidden"
-          : "flex size-full flex-col gap-2",
+          : "flex flex-col gap-2",
+        !isDesktop && cameraAspect === "tall" && "size-full",
         className,
       )}
     >