From 2a0a8a5e8594446c1077bb78703a34e488e98a1b Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 4 Jun 2024 06:48:32 -0600
Subject: [PATCH] Fix stretching of event cards

---
 web/src/views/events/RecordingView.tsx | 45 ++++++++++++++------------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index c4bd1857f..c8871500f 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -668,27 +668,32 @@ function Timeline({
           <Skeleton className="size-full" />
         )
       ) : (
-        <div
-          className={`grid h-full grid-cols-1 gap-4 overflow-auto bg-secondary p-4 ${isDesktop ? "" : "sm:grid-cols-2"}`}
-        >
-          {mainCameraReviewItems.map((review) => {
-            if (review.severity == "significant_motion") {
-              return;
-            }
+        <div className="h-full overflow-auto bg-secondary">
+          <div
+            className={cn(
+              "grid h-auto grid-cols-1 gap-4 overflow-auto p-4",
+              isMobile && "sm:grid-cols-2",
+            )}
+          >
+            {mainCameraReviewItems.map((review) => {
+              if (review.severity == "significant_motion") {
+                return;
+              }
 
-            return (
-              <ReviewCard
-                key={review.id}
-                event={review}
-                currentTime={currentTime}
-                onClick={() => {
-                  setScrubbing(true);
-                  setCurrentTime(review.start_time - REVIEW_PADDING);
-                  setScrubbing(false);
-                }}
-              />
-            );
-          })}
+              return (
+                <ReviewCard
+                  key={review.id}
+                  event={review}
+                  currentTime={currentTime}
+                  onClick={() => {
+                    setScrubbing(true);
+                    setCurrentTime(review.start_time - REVIEW_PADDING);
+                    setScrubbing(false);
+                  }}
+                />
+              );
+            })}
+          </div>
         </div>
       )}
     </div>