From c69adf3f6706589ad9906db288565163cdadeae9 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 16:18:47 +0000
Subject: [PATCH] Improve video display layout with descriptions and details

Restructure the video display on the FolxStadlPage to a three-column grid, separating the VideoCard and its associated description and metadata 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/pages/FolxStadlPage.tsx | 39 +++++++++++++++---------------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index a8271a7..38baabc 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -101,26 +101,27 @@ export default function FolxStadlPage() {
         <div className="space-y-6">
           {currentVideos.map((video, index) => (
             <div key={video.id} className="bg-black/20 backdrop-blur-sm rounded-lg p-4">
-              {/* Video Card */}
-              <div className="mb-4">
-                <VideoCard
-                  video={video}
-                  onClick={handleVideoClick}
-                  className="w-full hover:scale-102 transition-all duration-300 rounded-lg overflow-hidden"
-                />
-              </div>
-              
-              {/* Video Description Below */}
-              <div className="space-y-3">
-                <h3 className="text-xl font-bold text-white">{video.title}</h3>
-                <div className="flex items-center gap-4 text-xs text-bunny-muted mb-2">
-                  <span>{video.views} Aufrufe</span>
-                  <span>{Math.floor(video.duration / 60)}:{(video.duration % 60).toString().padStart(2, '0')} min</span>
-                  <span>1 day ago</span>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                {/* Video Card */}
+                <div className="md:col-span-1">
+                  <VideoCard
+                    video={video}
+                    onClick={handleVideoClick}
+                    className="w-full hover:scale-102 transition-all duration-300 rounded-lg overflow-hidden"
+                  />
+                </div>
+                
+                {/* Video Description */}
+                <div className="md:col-span-2 space-y-3">
+                  <h3 className="text-xl font-bold text-white">{video.title}</h3>
+                  <p className="text-bunny-light text-sm leading-relaxed">
+                    {video.description || "Keine Beschreibung für diese Sendung verfügbar."}
+                  </p>
+                  <div className="flex items-center gap-4 text-xs text-bunny-muted">
+                    <span>{Math.floor(video.duration / 60)}:{(video.duration % 60).toString().padStart(2, '0')} min</span>
+                    <span>{video.views} Aufrufe</span>
+                  </div>
                 </div>
-                <p className="text-bunny-light text-sm leading-relaxed">
-                  {video.description || "Keine Beschreibung für diese Sendung verfügbar."}
-                </p>
               </div>
             </div>
           ))}