From 77c061e68c90b4d91ac3c76b750ac3f63dd3b29e Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 31 Jan 2024 06:29:37 -0700
Subject: [PATCH] Fix scaling for long timeline lists

---
 web/src/components/card/TimelineItemCard.tsx  |  2 +-
 web/src/views/history/DesktopTimelineView.tsx | 32 ++++++++++---------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/web/src/components/card/TimelineItemCard.tsx b/web/src/components/card/TimelineItemCard.tsx
index 000a29054..9ebbc2c88 100644
--- a/web/src/components/card/TimelineItemCard.tsx
+++ b/web/src/components/card/TimelineItemCard.tsx
@@ -47,7 +47,7 @@ export default function TimelineItemCard({
 
   return (
     <Card
-      className="relative m-2 flex w-full h-20 xl:h-24 3xl:h-28 4xl:h-36 cursor-pointer"
+      className="relative mx-2 mb-2 flex w-full h-20 xl:h-24 3xl:h-28 4xl:h-36 cursor-pointer"
       onClick={onSelect}
     >
       <div className="w-32 xl:w-40 3xl:w-44 4xl:w-60 p-2">
diff --git a/web/src/views/history/DesktopTimelineView.tsx b/web/src/views/history/DesktopTimelineView.tsx
index 06151f060..2c3d1ae17 100644
--- a/web/src/views/history/DesktopTimelineView.tsx
+++ b/web/src/views/history/DesktopTimelineView.tsx
@@ -109,7 +109,7 @@ export default function DesktopTimelineView({
 
   return (
     <div className="w-full flex flex-col">
-      <div className="flex max-h-[60%]">
+      <div className="flex mt-2 max-h-[60%]">
         <DynamicVideoPlayer
           className="w-2/3 bg-black flex justify-center items-center"
           camera={initialPlayback.camera}
@@ -129,22 +129,24 @@ export default function DesktopTimelineView({
             }
           }}
         />
-        <div className="px-2 h-full w-1/3 overflow-y-auto overflow-x-hidden">
-          {selectedPlayback.timelineItems.map((timeline) => {
-            return (
-              <TimelineItemCard
-                key={timeline.timestamp}
-                timeline={timeline}
-                relevantPreview={selectedPlayback.relevantPreview}
-                onSelect={() => {
-                  controllerRef.current?.seekToTimelineItem(timeline);
-                }}
-              />
-            );
-          })}
+        <div className="relative h-full w-1/3">
+          <div className="absolute px-2 left-0 top-0 right-0 bottom-0 overflow-y-auto overflow-x-hidden">
+            {selectedPlayback.timelineItems.map((timeline) => {
+              return (
+                <TimelineItemCard
+                  key={timeline.timestamp}
+                  timeline={timeline}
+                  relevantPreview={selectedPlayback.relevantPreview}
+                  onSelect={() => {
+                    controllerRef.current?.seekToTimelineItem(timeline);
+                  }}
+                />
+              );
+            })}
+          </div>
         </div>
       </div>
-      <div className="mt-4 w-full h-full relative">
+      <div className="relative mt-4 w-full h-full">
         <div className="absolute left-0 top-0 right-0 bottom-0 overflow-auto">
           {timelineStack.playbackItems.map((timeline) => {
             const isInitiallySelected =