From 6d6b800674e207969efc15a8492c8b672ff83a57 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 21 Mar 2026 01:34:18 +0000
Subject: [PATCH] fix: preserve aspect ratio in preview players during timeline
 scrubbing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace size-full (100%×100%) on img/video elements with max-h-full max-w-full
so portrait (9:16) and 4:3 cameras maintain their natural proportions during
scrubbing in RecordingView. Add items-center to flex containers so content
stays vertically centered within the available space.

https://claude.ai/code/session_01H1uowWMpsNm1U8HdcSP8AA
---
 web/src/components/player/PreviewPlayer.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx
index f7b4542c5..44474a9a6 100644
--- a/web/src/components/player/PreviewPlayer.tsx
+++ b/web/src/components/player/PreviewPlayer.tsx
@@ -281,7 +281,7 @@ function PreviewVideoPlayer({
     <div
       ref={visibilityRef}
       className={cn(
-        "relative flex w-full justify-center overflow-hidden rounded-lg bg-black md:rounded-2xl",
+        "relative flex w-full items-center justify-center overflow-hidden rounded-lg bg-black md:rounded-2xl",
         onClick && "cursor-pointer",
         className,
       )}
@@ -289,7 +289,7 @@ function PreviewVideoPlayer({
       onClick={onClick}
     >
       <img
-        className={`absolute size-full object-contain ${currentHourFrame ? "visible" : "invisible"}`}
+        className={`max-h-full max-w-full object-contain ${currentHourFrame ? "visible" : "invisible"}`}
         src={currentHourFrame}
         onLoad={() => {
           if (changeoverTimeout) {
@@ -303,7 +303,7 @@ function PreviewVideoPlayer({
       {isVisible && (
         <video
           ref={previewRef}
-          className={`absolute size-full object-contain ${currentHourFrame ? "invisible" : "visible"}`}
+          className={`max-h-full max-w-full object-contain ${currentHourFrame ? "invisible" : "visible"}`}
           preload="auto"
           autoPlay
           playsInline
@@ -348,7 +348,7 @@ function PreviewVideoPlayer({
           {t("noPreviewFoundFor", { camera: cameraName })}
         </div>
       )}
-      {firstLoad && <Skeleton className="absolute aspect-video size-full" />}
+      {firstLoad && <Skeleton className="aspect-video w-full" />}
     </div>
   );
 }
@@ -554,7 +554,7 @@ function PreviewFramesPlayer({
   return (
     <div
       className={cn(
-        "relative flex w-full justify-center",
+        "relative flex w-full items-center justify-center",
         className,
         onClick && "cursor-pointer",
       )}
@@ -562,7 +562,7 @@ function PreviewFramesPlayer({
     >
       <img
         ref={imgRef}
-        className={`size-full rounded-lg bg-black object-contain md:rounded-2xl`}
+        className="max-h-full max-w-full rounded-lg object-contain md:rounded-2xl"
         loading="lazy"
         onLoad={onImageLoaded}
       />