From 7fa619e26147243b071a5cef6fe255d41862c3f8 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 16:25:00 +0000
Subject: [PATCH] Make video player and details centered and larger on the page

Adjusted layout in BunnyVideoModal to center the video player and its associated text content within a larger maximum width container, and increased text sizes for better readability.

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/QQTyNAb
---
 client/src/components/bunny-video-modal.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index cb4ddb3..0082843 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -256,9 +256,9 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
         </div>
 
         {/* Video player area */}
-        <div className="flex-1 flex flex-col gap-2 min-h-0">
-          {/* Main video player */}
-          <div className="w-full">
+        <div className="flex-1 flex flex-col gap-4 min-h-0">
+          {/* Main video player - limited width */}
+          <div className="w-full max-w-4xl mx-auto">
             <div className="relative w-full aspect-video bg-black rounded-lg overflow-hidden">
               {video.videoUrlIframe ? (
                 <iframe
@@ -300,14 +300,14 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
             </div>
           </div>
           
-          {/* Video info always below video */}
-          <div className="w-full 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 info below video - centered */}
+          <div className="w-full max-w-4xl mx-auto">
+            <div className="p-4 bg-gray-800 rounded-lg text-white">
+              <h3 className="font-bold text-xl mb-3 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">
+              <div className="flex flex-wrap gap-4 text-sm text-gray-300 mb-4">
                 <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>