Improve height scaling of dialog

web/src/components/card/TimelineItemCard.tsx

@@ -23,18 +23,16 @@ export default function TimelineItemCard({
 
   return (
     <Card
-      className="relative m-2 flex w-full h-32 cursor-pointer"
+      className="relative m-2 flex w-full h-20 xl:h-24 3xl:h-28 4xl:h-36 cursor-pointer"
       onClick={onSelect}
     >
-      <div className="p-2">
+      <div className="w-32 xl:w-40 3xl:w-[180px] 4xl:w-60 p-2">
         <VideoPlayer
           options={{
             preload: "auto",
-            height: "114",
-            width: "202",
             autoplay: true,
             controls: false,
-            fluid: false,
+            aspectRatio: "16:9",
             muted: true,
             loadingSpinner: false,
             poster: relevantPreview
@@ -71,7 +69,7 @@ export default function TimelineItemCard({
           })}
         </div>
         <Button
-          className="absolute bottom-1 right-1"
+          className="absolute bottom-1 right-1 hidden xl:flex"
           size="sm"
           variant="secondary"
         >

web/src/pages/History.tsx

@@ -268,7 +268,7 @@ function TimelineViewer({
 
   return (
     <Dialog open={playback != undefined} onOpenChange={(_) => onClose()}>
-      <DialogContent className="w-[70%] max-h-[82%] max-w-full">
+      <DialogContent className="w-[70%] max-w-[1920px]">
         {timelineData && playback && (
           <DesktopTimelineView
             timelineData={timelineData}

web/src/views/history/DesktopTimelineView.tsx

@@ -108,9 +108,8 @@ export default function DesktopTimelineView({
   }
 
   return (
-    <div className="w-full">
-      <div className="flex">
-        <>
+    <div className="w-full xl:h-[586px] 2xl:h-[660px] 3xl:h-[880px] 4xl:h-[1080px]">
+      <div className="flex h-[60%]">
         <DynamicVideoPlayer
           className="w-2/3 bg-black flex justify-center items-center"
           camera={initialPlayback.camera}
@@ -130,8 +129,7 @@ export default function DesktopTimelineView({
             }
           }}
         />
-        </>
-        <div className="px-2 h-[608px] w-1/3 overflow-y-auto overflow-x-hidden">
+        <div className="px-2 h-full w-1/3 overflow-y-auto overflow-x-hidden">
           {selectedPlayback.timelineItems.map((timeline) => {
             return (
               <TimelineItemCard
@@ -146,7 +144,7 @@ export default function DesktopTimelineView({
           })}
         </div>
       </div>
-      <div className="m-1 w-full max-h-72 2xl:max-h-80 3xl:max-h-96 overflow-auto">
+      <div className="mt-4 w-full h-[40%] overflow-scroll">
         {timelineStack.playbackItems.map((timeline) => {
           const isInitiallySelected =
             initialPlayback.range.start == timeline.range.start;

web/tailwind.config.js

@@ -80,6 +80,7 @@ module.exports = {
         "xs": "480px",
         "2xl": "1440px",
         "3xl": "1920px",
+        "4xl": "2560px",
       },
     },
   },