sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve video modal layout for better mobile and desktop viewing

Browse Source 
Adjusted the layout of the video modal to display video information below the player on mobile devices and within a sidebar on desktop, enhancing responsiveness.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/DVZN4Rp
This commit is contained in:
sebastjanartic 2025-08-30 15:07:24 +00:00
parent 018cb354c2
commit 49c2842f74
1 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
client/src/components/bunny-video-modal.tsx
View File

@ -258,7 +258,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
{/* Video player area */}
<div className="flex-1 flex flex-col lg:flex-row gap-2 min-h-0">
{/* Main video player */}
<div className="flex-1">
<div className="flex-1 flex flex-col">
<div className="relative w-full aspect-video bg-black rounded-lg overflow-hidden">
{video.videoUrlIframe ? (
<iframe
@ -298,10 +298,33 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
</>
)}
</div>
{/* Video info directly under video on mobile, sidebar on desktop */}
<div className="block lg:hidden mt-0">
<div className="p-3 bg-gray-800 rounded-lg text-white max-h-none overflow-visible">
<h3 className="font-bold text-lg mb-2 whitespace-normal break-words" data-testid="text-video-title">
{video.title}
</h3>
<div className="flex flex-wrap gap-4 text-sm text-gray-300 mb-3">
<span data-testid="text-video-views">{formatViews(video.views)}</span>
<span data-testid="text-video-duration">{formatDuration(video.duration)}</span>
<span data-testid="text-video-date">{formatDate(video.createdAt)}</span>
</div>
{video.description && (
<div className="text-sm text-gray-300">
<p className="leading-relaxed whitespace-pre-wrap break-words" data-testid="text-video-description">
{video.description}
</p>
</div>
)}
</div>
</div>
</div>
{/* Video info sidebar */}
<div className="lg:w-80 lg:min-w-80 space-y-0 overflow-y-auto mt-0 lg:mt-0 lg:ml-4">
{/* Video info sidebar - desktop only */}
<div className="hidden lg:block lg:w-80 lg:min-w-80 space-y-0 overflow-y-auto lg:ml-4">
<div className="p-3 bg-gray-800 rounded-lg text-white max-h-none overflow-visible">
<h3 className="font-bold text-lg mb-2 whitespace-normal break-words" data-testid="text-video-title">
{video.title}
@ -313,7 +336,6 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
<span data-testid="text-video-date">{formatDate(video.createdAt)}</span>
</div>
{video.description && (
<div className="text-sm text-gray-300">
<p className="leading-relaxed whitespace-pre-wrap break-words" data-testid="text-video-description">