layout tweaks

This commit is contained in:
Josh Hawkins 2025-11-01 08:45:25 -05:00
parent 1d991f6c7c
commit fcc12f15cd
2 changed files with 28 additions and 26 deletions

View File

@ -391,10 +391,7 @@ export default function SearchDetailDialog({
</> </>
)} )}
{page == "tracking_details" && ( {page == "tracking_details" && (
<TrackingDetails <TrackingDetails event={search as unknown as Event} />
className="w-full overflow-x-hidden"
event={search as unknown as Event}
/>
)} )}
</> </>
)} )}

View File

@ -301,31 +301,36 @@ export function TrackingDetails({
<div <div
className={cn( className={cn(
"relative flex items-center justify-center", "flex w-full items-center justify-center",
cameraAspect === "wide" isDesktop && "overflow-hidden",
? "w-full flex-1" cameraAspect === "tall" ? "max-h-[50dvh] lg:max-h-[70dvh]" : "w-full",
: cameraAspect === "tall" cameraAspect !== "tall" && isDesktop && "flex-[3]",
? "max-h-[50dvh] lg:max-h-[70dvh]"
: isDesktop && "w-full flex-[3]",
)} )}
style={{ aspectRatio: aspectRatio }} style={{ aspectRatio: aspectRatio }}
ref={containerRef} ref={containerRef}
> >
<HlsVideoPlayer <div
videoRef={videoRef} className={cn(
containerRef={containerRef} "relative",
visible={true} cameraAspect === "tall" ? "h-full" : "w-full",
currentSource={videoSource} )}
hotKeys={false} >
supportsFullscreen={false} <HlsVideoPlayer
fullscreen={false} videoRef={videoRef}
frigateControls={true} containerRef={containerRef}
onTimeUpdate={handleTimeUpdate} visible={true}
onSeekToTime={handleSeekToTime} currentSource={videoSource}
isDetailMode={true} hotKeys={false}
camera={event.camera} supportsFullscreen={false}
currentTimeOverride={currentTime} fullscreen={false}
/> frigateControls={true}
onTimeUpdate={handleTimeUpdate}
onSeekToTime={handleSeekToTime}
isDetailMode={true}
camera={event.camera}
currentTimeOverride={currentTime}
/>
</div>
</div> </div>
<div className={cn(isDesktop && "flex-[2] overflow-hidden")}> <div className={cn(isDesktop && "flex-[2] overflow-hidden")}>
@ -335,7 +340,7 @@ export function TrackingDetails({
isDesktop && "scrollbar-container h-full overflow-y-auto", 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> <Heading as="h4">{t("trackingDetails.title")}</Heading>
<div className="flex flex-row gap-2"> <div className="flex flex-row gap-2">