From 5dbc43f50d81e3d297db1df7475ca430e6ac6a33 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 4 Mar 2024 05:57:56 -0600
Subject: [PATCH] fix overflowing review timeline on mobile

---
 web/src/components/timeline/EventReviewTimeline.tsx | 2 +-
 web/src/views/events/RecordingView.tsx              | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/timeline/EventReviewTimeline.tsx b/web/src/components/timeline/EventReviewTimeline.tsx
index 998234711..f2e5adb29 100644
--- a/web/src/components/timeline/EventReviewTimeline.tsx
+++ b/web/src/components/timeline/EventReviewTimeline.tsx
@@ -184,7 +184,7 @@ export function EventReviewTimeline({
             >
               <div
                 className={`bg-destructive rounded-full mx-auto ${
-                  segmentDuration < 60 ? "w-14 md:w-20" : "w-12 md:w-16"
+                  segmentDuration < 60 ? "w-16 md:w-20" : "w-12 md:w-16"
                 } h-5 flex items-center justify-center`}
               >
                 <div
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index a120ebb00..739f1cd28 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -81,7 +81,7 @@ export default function RecordingView({
   }, [scrubbing]);
 
   return (
-    <div ref={contentRef} className="relative w-full h-full">
+    <div ref={contentRef} className="flex flex-col relative w-full h-full">
       <Button
         className="md:absolute md:top-0 md:left-0 rounded-lg"
         onClick={() => navigate(-1)}
@@ -110,7 +110,7 @@ export default function RecordingView({
         />
       </div>
 
-      <div className="md:absolute md:w-[100px] md:inset-y-0 md:right-0">
+      <div className="flex-grow overflow-hidden md:absolute md:w-[100px] md:inset-y-0 md:right-0">
         <EventReviewTimeline
           segmentDuration={30}
           timestampSpread={15}