fix: review screen recording without clipped content

js/src/features/compose/compose-overlay.tsx

@@ -503,6 +503,7 @@ export function ComposeOverlay({
           isDragging={isDragging}
           dropZoneProps={dropZoneProps}
           mirror={true}
+          objectFit="cover"
         />
       )}
       {step === "reviewing" && recordingSource === "screen" && reviewBlob && (
@@ -519,6 +520,7 @@ export function ComposeOverlay({
           isDragging={isDragging}
           dropZoneProps={dropZoneProps}
           mirror={false}
+          objectFit="contain"
         />
       )}
       {step === "typing" && (

js/src/features/compose/recording-overlay.tsx

@@ -25,8 +25,10 @@ interface RecordingOverlayProps {
     onDragLeave: (e: React.DragEvent) => void;
     onDrop: (e: React.DragEvent) => void;
   };
-  /** Mirror the video horizontally. Defaults to true (selfie-view for webcam). Set false for screen recordings. */
+  /** Mirror the video horizontally. Defaults to true (selfie-view for webcam). */
   mirror?: boolean;
+  /** How video fills its container. Defaults to "cover". Use "contain" for screen recordings. */
+  objectFit?: "cover" | "contain";
 }
 
 function RecordingTimer() {
@@ -55,10 +57,12 @@ function ReviewPlayback({
   blob,
   isVideo,
   mirror = true,
+  objectFit = "cover",
 }: {
   blob: Blob;
   isVideo: boolean;
   mirror?: boolean;
+  objectFit?: "cover" | "contain";
 }) {
   const urlRef = useRef<string | null>(null);
   const [objectUrl, setObjectUrl] = useState<string | null>(null);
@@ -86,7 +90,7 @@ function ReviewPlayback({
         autoPlay
         loop
         playsInline
-        className={`absolute inset-0 h-full w-full object-cover${mirror ? " -scale-x-100" : ""}`}
+        className={`absolute inset-0 h-full w-full ${objectFit === "contain" ? "object-contain" : "object-cover"}${mirror ? " -scale-x-100" : ""}`}
       />
     );
   }
@@ -124,6 +128,7 @@ export function RecordingOverlay({
   isDragging,
   dropZoneProps,
   mirror = true,
+  objectFit = "cover",
 }: RecordingOverlayProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
   const recordingAudioSource = useAudioSource(mediaStream ?? null);
@@ -182,6 +187,7 @@ export function RecordingOverlay({
           blob={reviewBlob}
           isVideo={recordingMode === "video"}
           mirror={mirror}
+          objectFit={objectFit}
         />
       )}