administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-05-04 04:27:42 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Fix recordings view for mobile landscape

Browse Source 
The events view incorrectly was displaying two columns on landscape view and it only took up 20% of the screen width. Additionally, in landscape view the timeline was too wide (especially on iPads of various screen sizes) and would overlap the main video
This commit is contained in:
Josh Hawkins 2025-05-10 22:54:20 -05:00
parent fda420a0b3
commit 1503d2db29
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/views/recording/RecordingView.tsx
View File

@ -819,7 +819,7 @@ function Timeline({
className={`${ className={`${
isDesktop isDesktop
? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} no-scrollbar overflow-y-auto` ? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} no-scrollbar overflow-y-auto`
: "overflow-hidden portrait:flex-grow landscape:w-[20%]" : `overflow-hidden portrait:flex-grow ${timelineType == "timeline" ? "landscape:w-[100px]" : "landscape:w-[175px]"} `
} relative`} } relative`}
> >
<div className="pointer-events-none absolute inset-x-0 top-0 z-20 h-[30px] w-full bg-gradient-to-b from-secondary to-transparent"></div> <div className="pointer-events-none absolute inset-x-0 top-0 z-20 h-[30px] w-full bg-gradient-to-b from-secondary to-transparent"></div>
@ -855,7 +855,7 @@ function Timeline({
<div <div
className={cn( className={cn(
"scrollbar-container grid h-auto grid-cols-1 gap-4 overflow-auto p-4", "scrollbar-container grid h-auto grid-cols-1 gap-4 overflow-auto p-4",
isMobile && "sm:grid-cols-2", isMobile && "sm:portrait:grid-cols-2",
)} )}
> >
{mainCameraReviewItems.length === 0 ? ( {mainCameraReviewItems.length === 0 ? (