fix mobilepage in tracked object details

This commit is contained in:
Josh Hawkins 2025-11-07 09:33:59 -06:00
parent 6a27c47808
commit 2376bcaf97
2 changed files with 39 additions and 36 deletions

View File

@ -306,7 +306,7 @@ function DialogContentComponent({
if (page === "tracking_details") { if (page === "tracking_details") {
return ( return (
<TrackingDetails <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} event={search as unknown as Event}
tabs={ tabs={
isDesktop ? ( isDesktop ? (
@ -584,7 +584,7 @@ export default function SearchDetailDialog({
"scrollbar-container overflow-y-auto", "scrollbar-container overflow-y-auto",
isDesktop && isDesktop &&
"max-h-[95dvh] sm:max-w-xl md:max-w-4xl lg:max-w-[70%]", "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) => { onInteractOutside={(e) => {
if (isPopoverOpen) { if (isPopoverOpen) {
@ -596,7 +596,7 @@ export default function SearchDetailDialog({
} }
}} }}
> >
<Header> <Header className={cn(!isDesktop && "top-0 mb-0")}>
<Title>{t("trackedObjectDetails")}</Title> <Title>{t("trackedObjectDetails")}</Title>
<Description className="sr-only"> <Description className="sr-only">
{t("trackedObjectDetails")} {t("trackedObjectDetails")}
@ -604,39 +604,41 @@ export default function SearchDetailDialog({
</Description> </Description>
</Header> </Header>
{!isDesktop && ( <div className="flex-1">
<div className="flex w-full flex-col justify-center gap-4"> {!isDesktop && (
<TabsWithActions <div className="flex w-full flex-col justify-center gap-4">
search={search} <TabsWithActions
searchTabs={searchTabs} search={search}
pageToggle={pageToggle} searchTabs={searchTabs}
setPageToggle={setPageToggle} pageToggle={pageToggle}
config={config} setPageToggle={setPageToggle}
setSearch={setSearch} config={config}
setSimilarity={setSimilarity} setSearch={setSearch}
isPopoverOpen={isPopoverOpen} setSimilarity={setSimilarity}
setIsPopoverOpen={setIsPopoverOpen} isPopoverOpen={isPopoverOpen}
dialogContainer={dialogContainer} setIsPopoverOpen={setIsPopoverOpen}
/> dialogContainer={dialogContainer}
</div> />
)} </div>
)}
<DialogContentComponent <DialogContentComponent
page={page} page={page}
search={search} search={search}
isDesktop={isDesktop} isDesktop={isDesktop}
apiHost={apiHost} apiHost={apiHost}
config={config} config={config}
searchTabs={searchTabs} searchTabs={searchTabs}
pageToggle={pageToggle} pageToggle={pageToggle}
setPageToggle={setPageToggle} setPageToggle={setPageToggle}
setSearch={setSearch} setSearch={setSearch}
setInputFocused={setInputFocused} setInputFocused={setInputFocused}
setSimilarity={setSimilarity} setSimilarity={setSimilarity}
isPopoverOpen={isPopoverOpen} isPopoverOpen={isPopoverOpen}
setIsPopoverOpen={setIsPopoverOpen} setIsPopoverOpen={setIsPopoverOpen}
dialogContainer={dialogContainer} dialogContainer={dialogContainer}
/> />
</div>
</Content> </Content>
</Overlay> </Overlay>
</DetailStreamProvider> </DetailStreamProvider>

View File

@ -352,7 +352,8 @@ export function TrackingDetails({
className={cn( className={cn(
isDesktop isDesktop
? "flex size-full justify-evenly gap-4 overflow-hidden" ? "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, className,
)} )}
> >