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

Improve video modal layout for better mobile viewing experience

Browse Source 
Adjusted flexbox properties and margins in the video modal component to ensure proper centering and alignment of video content and related information on smaller screens.

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/Sy6XHzr
This commit is contained in:
sebastjanartic 2025-08-30 19:42:06 +00:00
parent 0a0248012e
commit 5db19c829c
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756582866699.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 176 KiB

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

@ -173,7 +173,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
onClick={handleBackdropClick} onClick={handleBackdropClick}
style={{ backgroundColor: '#1f2937' }} style={{ backgroundColor: '#1f2937' }}
> >
<div className="relative w-full h-full max-w-7xl mx-auto p-4 flex flex-col"> <div className="relative w-full h-full max-w-7xl mx-auto p-4 flex flex-col md:items-center md:justify-center">
{/* Header with close button */} {/* Header with close button */}
<div className="flex justify-end items-center mb-1 z-10"> <div className="flex justify-end items-center mb-1 z-10">
<div className="flex gap-2"> <div className="flex gap-2">
@ -202,9 +202,9 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
</div> </div>
{/* Video player area */} {/* Video player area */}
<div className="flex-1 flex flex-col gap-3 min-h-0"> <div className="flex-1 flex flex-col gap-3 min-h-0 items-center md:items-start">
{/* Main video player */} {/* Main video player */}
<div className="w-full max-w-lg ml-8 md:ml-8 ml-0"> <div className="w-full max-w-lg mx-auto md:ml-8 md:mx-0">
<div className="relative w-full aspect-video bg-black rounded-lg overflow-hidden"> <div className="relative w-full aspect-video bg-black rounded-lg overflow-hidden">
{video.videoUrlIframe ? ( {video.videoUrlIframe ? (
<iframe <iframe
@ -247,7 +247,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
</div> </div>
{/* Video info always below video */} {/* Video info always below video */}
<div className="w-full max-w-lg ml-8 md:ml-8 ml-0"> <div className="w-full max-w-lg mx-auto md:ml-8 md:mx-0">
<div className="p-4 bg-gray-800 rounded-lg text-white relative"> <div className="p-4 bg-gray-800 rounded-lg text-white relative">
<div className="flex flex-col md:flex-row md:justify-between md:items-center mb-3 gap-2 md:gap-0"> <div className="flex flex-col md:flex-row md:justify-between md:items-center mb-3 gap-2 md:gap-0">
<h3 className="font-bold text-xl whitespace-normal break-words flex-1 md:pr-4" data-testid="text-video-title"> <h3 className="font-bold text-xl whitespace-normal break-words flex-1 md:pr-4" data-testid="text-video-title">