From 2beec6bb18af07083becb871292239da911dc6dd Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sat, 4 Jul 2026 21:25:37 +0200
Subject: [PATCH] fix(watch): shrink-wrap the player to the video aspect
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A vertical/short clip rendered in a fixed full-width box with large black side
bars. The player container now uses w-fit + mx-auto and the video max-h/max-w, so
a portrait clip becomes a narrow centered player and a landscape clip fills the
width — no letterboxing either way.
---
 frontend/src/components/WatchPage.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/WatchPage.tsx b/frontend/src/components/WatchPage.tsx
index ecec257..0738247 100644
--- a/frontend/src/components/WatchPage.tsx
+++ b/frontend/src/components/WatchPage.tsx
@@ -152,8 +152,15 @@ export default function WatchPage() {
 
         {status === "ready" && meta && (
           <div>
-            <div className="rounded-xl overflow-hidden bg-black border border-slate-800">
-              <video controls playsInline src={meta.file_url} className="w-full max-h-[75vh] mx-auto block" />
+            {/* Shrink-wrap the player to the video so a vertical/short clip renders as a narrow
+                player instead of a wide box with black bars; a landscape clip fills the width. */}
+            <div className="rounded-xl overflow-hidden bg-black border border-slate-800 w-fit max-w-full mx-auto">
+              <video
+                controls
+                playsInline
+                src={meta.file_url}
+                className="max-h-[80vh] max-w-full mx-auto block"
+              />
             </div>
             <div className="mt-3 flex items-start gap-3">
               <div className="min-w-0 flex-1">