From 5db02f02f3de84f03288385c214cf2533689be6a Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 22:33:29 +0000
Subject: [PATCH] Update video page layout for better responsiveness and wider
 display

Adjusts the container width and column layout in `VideoPage.tsx` to use a max-w-7xl container and change the flex direction from `xl:flex-row` to `lg:flex-row`, and modifies the sidebar width from `xl:w-80 2xl:w-96` to `lg:w-96` for improved responsiveness.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 344ec1e0-1186-4058-bbff-2e9619a7b1e0
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/344ec1e0-1186-4058-bbff-2e9619a7b1e0/FgaI1Sc
---
 client/src/pages/VideoPage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index b04b976..7b35c77 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -298,7 +298,7 @@ export default function VideoPage() {
         )}
       </div>
 
-      <div className="w-full px-4 lg:px-6 relative">
+      <div className="max-w-7xl mx-auto p-4 lg:p-6 relative">
         {/* Background logo decorations */}
         <div 
           style={{
@@ -373,7 +373,7 @@ export default function VideoPage() {
           }}
         />
         
-        <div className="flex flex-col xl:flex-row gap-6 relative z-[40]">
+        <div className="flex flex-col lg:flex-row gap-6 relative z-[40]">
           {/* Main video section */}
           <div className="flex-1">
             {/* Video player */}
@@ -486,7 +486,7 @@ export default function VideoPage() {
           </div>
 
           {/* Recommended videos sidebar */}
-          <div className="w-full xl:w-80 2xl:w-96">
+          <div className="w-full lg:w-96">
             <h2 className="text-lg font-semibold text-bunny-light mb-4">Empfohlene Videos</h2>
             
             <div className="space-y-2">