From 1503d2db294c4e8b0af3dd05f2d0561abbb6f617 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 10 May 2025 22:54:20 -0500
Subject: [PATCH] Fix recordings view for mobile landscape

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
---
 web/src/views/recording/RecordingView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/views/recording/RecordingView.tsx b/web/src/views/recording/RecordingView.tsx
index 344fd8caa..9e38503d1 100644
--- a/web/src/views/recording/RecordingView.tsx
+++ b/web/src/views/recording/RecordingView.tsx
@@ -819,7 +819,7 @@ function Timeline({
       className={`${
         isDesktop
           ? `${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`}
     >
       <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
             className={cn(
               "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 ? (