Get video scaling working

web/src/pages/History.tsx

@@ -242,7 +242,7 @@ function TimelineViewer({ playback, isMobile, onClose }: TimelineViewerProps) {
 
   return (
     <Dialog open={playback != undefined} onOpenChange={(_) => onClose()}>
-      <DialogContent className="w-screen 2xl:w-4/5 max-w-full">
+      <DialogContent className="w-screen 2xl:w-2/3 max-w-full">
         {playback && (
           <HistoryTimelineView playback={playback} isMobile={isMobile} />
         )}

web/src/views/history/HistoryTimelineView.tsx

@@ -259,8 +259,9 @@ function DesktopView({
     <div className="w-full">
       <div className="flex">
         <>
+          <div className="w-2/3 bg-black flex justify-center items-center">
             <div
-            className={`relative ${
+              className={`w-full relative ${
                 hasRelevantPreview && scrubbing ? "hidden" : "visible"
               }`}
             >
@@ -268,9 +269,6 @@ function DesktopView({
                 options={{
                   preload: "auto",
                   autoplay: true,
-                fluid: false,
-                height: "608",
-                width: "1080",
                   sources: [
                     {
                       src: playbackUri,
@@ -299,7 +297,7 @@ function DesktopView({
               </VideoPlayer>
             </div>
             {hasRelevantPreview && (
-            <div className={`${scrubbing ? "visible" : "hidden"}`}>
+            <div className={`w-full ${scrubbing ? "visible" : "hidden"}`}>
               <VideoPlayer
                 options={{
                   preload: "auto",
@@ -325,8 +323,9 @@ function DesktopView({
               />
             </div>
           )}
+          </div>
         </>
-        <div className="px-2 w-full h-[608px] overflow-auto">
+        <div className="px-2 h-[608px] overflow-auto">
           {playback.timelineItems.map((timeline) => {
             return (
               <TimelineItemCard