From dce4e3fb0b9176263eb05287dbf304cd94a68e3e Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 28 Feb 2024 09:57:56 -0600
Subject: [PATCH] Make full recordings view usable on mobile (#10134)

* adapt timeline to mobile

* remove unused

* tweaks

* pointer cursor on segments

* make full recordings view look better on mobile

* explicitly set timeline width for md

* button positioning
---
 web/src/components/timeline/EventSegment.tsx  | 2 +-
 web/src/views/events/DesktopRecordingView.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/components/timeline/EventSegment.tsx b/web/src/components/timeline/EventSegment.tsx
index 78d54d578..a64a1e80c 100644
--- a/web/src/components/timeline/EventSegment.tsx
+++ b/web/src/components/timeline/EventSegment.tsx
@@ -238,7 +238,7 @@ export function EventSegment({
     }
   }, [showMinimap, isFirstSegmentInMinimap, events, segmentDuration]);
 
-  const segmentClasses = `h-2 relative w-[55px] md:w-[100px] ${
+  const segmentClasses = `h-2 relative w-full ${
     showMinimap
       ? isInMinimapRange
         ? "bg-card"
diff --git a/web/src/views/events/DesktopRecordingView.tsx b/web/src/views/events/DesktopRecordingView.tsx
index 9eb4d04b0..8fafd86a8 100644
--- a/web/src/views/events/DesktopRecordingView.tsx
+++ b/web/src/views/events/DesktopRecordingView.tsx
@@ -79,14 +79,14 @@ export default function DesktopRecordingView({
   return (
     <div ref={contentRef} className="relative w-full h-full">
       <Button
-        className="absolute left-0 top-0 rounded-lg"
+        className="md:absolute md:top-0 md:left-0 rounded-lg"
         onClick={() => navigate(-1)}
       >
         <IoMdArrowRoundBack className="size-5 mr-[10px]" />
         Back
       </Button>
 
-      <div className="absolute top-8 inset-x-[20%]">
+      <div className="md:absolute md:top-8 md:inset-x-[20%]">
         <DynamicVideoPlayer
           camera={selectedReview.camera}
           timeRange={timeRange.ranges[selectedRangeIdx]}
@@ -106,7 +106,7 @@ export default function DesktopRecordingView({
         />
       </div>
 
-      <div className="absolute inset-y-0 right-0">
+      <div className="md:absolute md:w-[100px] md:inset-y-0 md:right-0">
         <EventReviewTimeline
           segmentDuration={30}
           timestampSpread={15}