feat: implement responsive video player with aspect ratio

- Update ReactPlayer to use width='100%', height='auto' with aspectRatio: '16/9'
- Replace padding-top approach with modern aspect-ratio CSS property
- Add minimum width (300px) and maximum width (800px) constraints
- Center video container with margin: 0 auto
- Ensure video player is no longer constrained by title length
- Improve video viewing experience across different screen sizes

src/components/ContentPanel.tsx

@@ -400,9 +400,13 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
             <ReactPlayer 
               url={selectedUrl as string} 
               controls 
-              width="100%" 
+              width="100%"
-              height="100%"
+              height="auto"
-              style={{ position: 'absolute', top: 0, left: 0 }}
+              style={{ 
+                width: '100%', 
+                height: 'auto', 
+                aspectRatio: '16/9' 
+              }}
               onDuration={(d) => setVideoDurationSec(Math.floor(d))}
             />
           </div>

src/styles/components/reader.css

@@ -13,8 +13,11 @@
 /* Video container - responsive wrapper following react-player docs */
 .reader-video { 
   position: relative;
-  padding-top: 56.25%; /* 16:9 aspect ratio */
+  width: 100%;
-  margin-bottom: 1rem;
+  min-width: 300px;  /* Minimum width */
+  max-width: 800px;   /* Maximum width */
+  aspect-ratio: 16/9;
+  margin: 0 auto 1rem auto; /* Center it */
   background: #000;
 }
 .reader.empty { color: #888; }