From 49c2842f74ad34268f5f8761487c3aaf4c87e709 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 15:07:24 +0000
Subject: [PATCH] Improve video modal layout for better mobile and desktop
 viewing

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

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index ad412d5..91cc8cb 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -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">