From c9934f7e4b63f999182b9e429b0be41972ea1547 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 27 Mar 2024 13:40:55 -0600
Subject: [PATCH] Fix horizontal camera list

---
 web/src/views/events/RecordingView.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index 050bce61c..c04d80640 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -317,7 +317,7 @@ export function RecordingView({
       </div>
 
       <div
-        className={`flex h-full my-2 justify-center overflow-hidden ${isDesktop ? "" : "flex-col gap-2"}`}
+        className={`h-full flex my-2 justify-center overflow-hidden ${isDesktop ? "" : "flex-col gap-2"}`}
       >
         <div className="flex flex-1 flex-wrap">
           <div
@@ -327,7 +327,7 @@ export function RecordingView({
               key={mainCamera}
               className={
                 isDesktop
-                  ? `flex justify-center mb-5 ${mainCameraAspect == "tall" ? "h-full" : "w-[82%]"}`
+                  ? `flex justify-center mb-5 ${mainCameraAspect == "tall" ? "h-full" : "w-[78%]"}`
                   : `w-full ${mainCameraAspect == "wide" ? "" : "aspect-video"}`
               }
             >
@@ -354,7 +354,7 @@ export function RecordingView({
             </div>
             {isDesktop && (
               <div
-                className={`flex justify-center gap-2 ${mainCameraAspect == "tall" ? "h-full flex-col overflow-y-auto items-center" : "w-full overflow-x-auto"}`}
+                className={`flex gap-2 ${mainCameraAspect == "tall" ? "h-full w-[16%] flex-col overflow-y-auto" : "w-full justify-center overflow-x-auto"}`}
               >
                 {allCameras.map((cam) => {
                   if (cam !== mainCamera) {
@@ -362,7 +362,9 @@ export function RecordingView({
                       <div key={cam}>
                         <PreviewPlayer
                           className={
-                            mainCameraAspect == "tall" ? "" : "size-full"
+                            mainCameraAspect == "tall"
+                              ? "size-full"
+                              : "size-full"
                           }
                           camera={cam}
                           timeRange={currentTimeRange}