From 97337008740f869aeabe18525def5a967f7fbc67 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Fri, 1 May 2026 16:33:33 +0100
Subject: [PATCH] fix(captions): remove duplicate native track display, fix
 position to bottom
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove `default` from <track> element so browser doesn't render native
  captions on top of the custom overlay (was causing double display)
- Remove positionTop logic — always render overlay at bottom-14 (above controls)
  regardless of VTT line hints; applies to both VideoWithCaptions and VideoReviewPlayer

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/VideoReview/VideoReviewPlayer.tsx | 4 ++--
 frontend/src/components/VideoWithCaptions.tsx             | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/VideoReview/VideoReviewPlayer.tsx b/frontend/src/components/VideoReview/VideoReviewPlayer.tsx
index b80c3e9..b77b70e 100644
--- a/frontend/src/components/VideoReview/VideoReviewPlayer.tsx
+++ b/frontend/src/components/VideoReview/VideoReviewPlayer.tsx
@@ -305,9 +305,9 @@ export function VideoReviewPlayer({ job, downloads }: VideoReviewPlayerProps) {
               </div>
             )}
 
-            {/* Caption Overlay — respects VTT line:0% positioning to avoid obscuring on-screen text */}
+            {/* Caption Overlay — always at the bottom, above native controls */}
             {showCaptions && currentCaption && (
-              <div className={`absolute ${currentCaption.positionTop ? 'top-4' : 'bottom-16'} left-1/2 transform -translate-x-1/2 bg-black bg-opacity-80 text-white px-4 py-2 rounded max-w-[90%]`}>
+              <div className="absolute bottom-14 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-80 text-white px-4 py-2 rounded max-w-[90%]">
                 <div className="text-center whitespace-pre-wrap">
                   {currentCaption.text}
                 </div>
diff --git a/frontend/src/components/VideoWithCaptions.tsx b/frontend/src/components/VideoWithCaptions.tsx
index 8d52ae9..b8e178b 100644
--- a/frontend/src/components/VideoWithCaptions.tsx
+++ b/frontend/src/components/VideoWithCaptions.tsx
@@ -257,15 +257,14 @@ export function VideoWithCaptions({
               kind="captions"
               src={captionsBlobUrl}
               label={currentTrack?.label || selectedLanguage}
-              default
             />
           )}
           Your browser does not support the video tag.
         </video>
         
-        {/* Caption Overlay — respects VTT line:0% positioning to avoid obscuring on-screen text */}
+        {/* Caption Overlay — always at the bottom, above native controls */}
         {showCaptions && currentCaption && (
-          <div className={`absolute ${currentCaption.positionTop ? 'top-4' : 'bottom-16'} left-1/2 transform -translate-x-1/2 bg-black bg-opacity-80 text-white px-4 py-2 rounded max-w-[90%]`}>
+          <div className="absolute bottom-14 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-80 text-white px-4 py-2 rounded max-w-[90%]">
             <div className="text-center whitespace-pre-wrap">
               {currentCaption.text}
             </div>