Adjust video modal layout to improve appearance on various screen sizes

Modify the `BunnyVideoModal` component to remove centering of video content and ensure proper layout alignment across different screen resolutions.

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:53 +00:00
parent 5db19c829c
commit e6ed9a81df

View File

@ -173,7 +173,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
onClick={handleBackdropClick}
style={{ backgroundColor: '#1f2937' }}
>
<div className="relative w-full h-full max-w-7xl mx-auto p-4 flex flex-col md:items-center md:justify-center">
<div className="relative w-full h-full max-w-7xl mx-auto p-4 flex flex-col">
{/* Header with close button */}
<div className="flex justify-end items-center mb-1 z-10">
<div className="flex gap-2">
@ -202,7 +202,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
</div>
{/* Video player area */}
<div className="flex-1 flex flex-col gap-3 min-h-0 items-center md:items-start">
<div className="flex-1 flex flex-col gap-3 min-h-0">
{/* Main video player */}
<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">