From 4c11c5fc549385e383a34ffb6c051a496bf47425 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 13 Oct 2025 18:30:09 +0200
Subject: [PATCH] fix(reader): use responsive aspect-ratio container for videos
 to fill full width

---
 src/components/ContentPanel.tsx  |  2 +-
 src/styles/components/reader.css | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx
index 797f85e6..0dc5b04f 100644
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -412,7 +412,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
               url={selectedUrl as string} 
               controls 
               width="100%" 
-              height="60vh" 
+              height="100%" 
               onDuration={(d) => setVideoDurationSec(Math.floor(d))}
             />
           </div>
diff --git a/src/styles/components/reader.css b/src/styles/components/reader.css
index e8b597ec..fe3a7c37 100644
--- a/src/styles/components/reader.css
+++ b/src/styles/components/reader.css
@@ -2,9 +2,20 @@
 .reader { background: #1a1a1a; border: 1px solid #333; border-radius: 8px; padding: 0.75rem; text-align: left; overflow: hidden; contain: layout style; }
 /* Video container in reader - break out of padding to use full width */
 .reader-video { 
+  width: 100%;
   margin: -0.75rem -0.75rem 1rem -0.75rem; 
-  border-radius: 8px 8px 0 0; 
-  overflow: hidden; 
+  border-radius: 0;
+  overflow: hidden;
+  position: relative;
+  aspect-ratio: 16 / 9;
+}
+/* Make ReactPlayer fill the container */
+.reader-video > div {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  width: 100% !important;
+  height: 100% !important;
 }
 .reader.empty { color: #888; }
 .loading-spinner { display: flex; align-items: center; gap: 0.5rem; color: #888; }