From 6892bfaeae514d05f5da3ec17d1d9d3ae24eceb9 Mon Sep 17 00:00:00 2001
From: tigeren <tigeren@live.com>
Date: Tue, 26 Aug 2025 03:47:53 +0000
Subject: [PATCH] refactor: enhance inline video player layout and styling

- Updated the structure of the inline video player component for improved responsiveness and visual consistency.
- Adjusted CSS classes to better manage layout, including flex properties and spacing.
- Enhanced video info display with improved styling for title and path, ensuring better readability.
---
 src/components/inline-video-player.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/inline-video-player.tsx b/src/components/inline-video-player.tsx
index e2c34c3..b4e2440 100644
--- a/src/components/inline-video-player.tsx
+++ b/src/components/inline-video-player.tsx
@@ -136,9 +136,9 @@ export default function InlineVideoPlayer({ video, isOpen, onClose, scrollPositi
   if (!isOpen) return null;
 
   return (
-    <div className={`fixed inset-0 z-50 bg-background transition-opacity duration-300 ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
+    <div className={`fixed inset-0 z-50 bg-background transition-opacity duration-300 flex flex-col ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
       {/* Header */}
-      <div className="sticky top-0 z-10 bg-background border-b border-border">
+      <div className="flex-shrink-0 bg-background border-b border-border">
         <div className="max-w-7xl mx-auto px-6 py-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-4">
@@ -158,7 +158,8 @@ export default function InlineVideoPlayer({ video, isOpen, onClose, scrollPositi
       </div>
 
       {/* Video Player */}
-      <div className="max-w-7xl mx-auto px-6 py-6">
+      <div className="flex-1 overflow-y-auto">
+        <div className="max-w-7xl mx-auto px-6 py-6">
         <div className="aspect-video bg-black rounded-lg overflow-hidden relative group">
           <video
             ref={videoRef}
@@ -246,11 +247,14 @@ export default function InlineVideoPlayer({ video, isOpen, onClose, scrollPositi
         </div>
 
         {/* Video info below player */}
-        <div className="mt-6 space-y-2">
-          <h2 className="text-2xl font-bold text-foreground">{video.title}</h2>
-          <p className="text-muted-foreground font-mono text-sm break-all">
-            {video.path}
-          </p>
+        <div className="mt-6 space-y-3 pb-8">
+          <h2 className="text-2xl font-bold text-foreground break-words leading-tight">{video.title}</h2>
+          <div className="bg-muted/50 rounded-lg p-4">
+            <p className="text-muted-foreground font-mono text-sm break-words leading-relaxed">
+              {video.path}
+            </p>
+          </div>
+        </div>
         </div>
       </div>
     </div>