Get video player to fit

web/src/views/history/HistoryTimelineView.tsx

@@ -20,6 +20,7 @@ import React, {
 } from "react";
 import useSWR from "swr";
 import Player from "video.js/dist/types/player";
+import TimelineItemCard from "@/components/card/TimelineItemCard";
 
 type HistoryTimelineViewProps = {
   playback: TimelinePlayback;
@@ -262,6 +263,7 @@ function DesktopView({
 }: DesktopViewProps) {
   return (
     <div className="w-full">
+      <div className="flex">
         <>
           <div
             className={`relative ${
@@ -272,6 +274,8 @@ function DesktopView({
               options={{
                 preload: "auto",
                 autoplay: true,
+                fluid: false,
+                height: "320",
                 sources: [
                   {
                     src: playbackUri,
@@ -327,6 +331,18 @@ function DesktopView({
             </div>
           )}
         </>
+        <div className="px-2 w-full h-80 overflow-auto">
+          {playback.timelineItems.map((timeline) => {
+            return (
+              <TimelineItemCard
+                key={timeline.timestamp}
+                timeline={timeline}
+                relevantPreview={playback.relevantPreview}
+              />
+            );
+          })}
+        </div>
+      </div>
       <div className="m-1">
         {playback != undefined && (
           <ActivityScrubber