Fix desktop vertical camera view

web/src/components/player/HlsVideoPlayer.tsx

@@ -88,8 +88,9 @@ export default function HlsVideoPlayer({
   const [controlsOpen, setControlsOpen] = useState(false);
 
   return (
+    <TransformWrapper minScale={1.0}>
       <div
-      className={`relative ${className ?? ""} ${visible ? "visible" : "hidden"}`}
+        className={`relative w-full ${className ?? ""} ${visible ? "visible" : "hidden"}`}
         onMouseOver={
           isDesktop
             ? () => {
@@ -106,8 +107,14 @@ export default function HlsVideoPlayer({
         }
         onClick={isDesktop ? undefined : () => setControls(!controls)}
       >
-      <TransformWrapper minScale={1.0}>
-        <TransformComponent>
+        <TransformComponent
+          wrapperStyle={{
+            width: "100%",
+          }}
+          contentStyle={{
+            width: "100%",
+          }}
+        >
           <video
             ref={videoRef}
             className={`size-full bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
@@ -154,7 +161,6 @@ export default function HlsVideoPlayer({
             }}
           />
         </TransformComponent>
-      </TransformWrapper>
         <VideoControls
           className="absolute bottom-5 left-1/2 -translate-x-1/2"
           video={videoRef.current}
@@ -190,5 +196,6 @@ export default function HlsVideoPlayer({
         />
         {children}
       </div>
+    </TransformWrapper>
   );
 }

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -55,7 +55,7 @@ export default function DynamicVideoPlayer({
     if (aspectRatio > 2) {
       return "";
     } else if (aspectRatio < 16 / 9) {
-      return "aspect-tall";
+      return isDesktop ? "" : "aspect-tall";
     } else {
       return "aspect-video";
     }
@@ -169,7 +169,7 @@ export default function DynamicVideoPlayer({
   }, [controller, recordings]);
 
   return (
-    <div className={`relative ${className ?? ""}`}>
+    <div className={`w-full relative ${className ?? ""}`}>
       <HlsVideoPlayer
         className={isDesktop ? `w-full ${grow}` : "max-h-[50dvh]"}
         videoRef={playerRef}

web/src/views/events/RecordingView.tsx

@@ -215,7 +215,7 @@ export function RecordingView({
     if (mainCameraAspect == "wide") {
       return "w-full aspect-wide";
     } else if (isDesktop && mainCameraAspect == "tall") {
-      return "h-full aspect-tall";
+      return "h-full aspect-tall flex flex-col justify-center";
     } else {
       return "w-full aspect-video";
     }
@@ -327,7 +327,7 @@ export function RecordingView({
               key={mainCamera}
               className={
                 isDesktop
-                  ? `flex justify-center items mb-5 ${mainCameraAspect == "tall" ? "h-[96%]" : "w-[82%]"}`
+                  ? `flex justify-center mb-5 ${mainCameraAspect == "tall" ? "h-full" : "w-[82%]"}`
                   : `w-full ${mainCameraAspect == "wide" ? "" : "aspect-video"}`
               }
             >