From e790b679fc662ef416e8036429bdc4bbd0171417 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Tue, 2 Sep 2025 16:04:04 +0000
Subject: [PATCH] Add expandable description to video cards and improve info
 display

Update `VideoCard` component to display the full video title, views, and creation date. Implements an expandable description section with "mehr" and "weniger" toggles for mobile view.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/4DOsXkx
---
 client/src/components/video-card.tsx | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index c4691cc..1a5bb87 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -291,16 +291,37 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
       {/* Mobile info section - below video */}
       {isMobile && (
         <div className="mt-3 px-1">
-          {/* Title - first line only */}
+          {/* Full title */}
           <h3 className="text-white font-bold text-base leading-tight mb-2" style={{fontFamily: 'Poppins, Inter, sans-serif'}}>
-            {video.title.split(' - ')[0] || 'go4.video'}
+            {video.title}
           </h3>
           
           {/* Views and Date in one line */}
-          <div className="flex items-center justify-between text-white/70 text-sm">
+          <div className="flex items-center justify-between text-white/70 text-sm mb-2">
             <span>{formatViews(video.views || 0)}</span>
             <span>{formatDate(video.createdAt)}</span>
           </div>
+          
+          {/* Description with expand/collapse */}
+          {(video.title.split(' - ')[1] || video.description) && (
+            <div className="text-white/70 text-sm">
+              <div className="flex items-start">
+                <p className={`flex-1 ${showMoreInfo ? '' : 'line-clamp-1'}`}>
+                  {video.title.split(' - ')[1] || video.description || ''}
+                </p>
+                <button 
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setShowMoreInfo(!showMoreInfo);
+                  }}
+                  className="ml-2 text-white/60 hover:text-white/80 text-sm transition-colors duration-200 flex-shrink-0"
+                >
+                  {showMoreInfo ? 'weniger' : 'mehr'}
+                </button>
+              </div>
+            </div>
+          )}
         </div>
       )}