From dc20d4a07af73213d636daeb5608b415d2edcbbe Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Wed, 3 Sep 2025 11:10:13 +0000
Subject: [PATCH] Shorten video titles displayed on cards for better
 readability

Update client/src/components/video-card.tsx to truncate video titles to 35 characters for the main title, 50 characters for the subtitle, and 60 characters with an ellipsis for the full title display, improving UI consistency and preventing layout issues.

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/HCAS0JG
---
 client/src/components/video-card.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 7f47fb4..e952be7 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -297,10 +297,10 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
           <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10 flex items-end p-4 group-hover:from-black/95 transition-all duration-300">
             <div className="w-full">
               <h3 className={`text-white font-extrabold leading-tight drop-shadow-2xl tracking-wide transform group-hover:scale-105 transition-transform duration-300 mb-1 ${isMobile ? 'text-2xl' : 'text-xl'}`} style={{fontFamily: 'Poppins, Inter, sans-serif', textShadow: '2px 2px 8px rgba(0,0,0,0.8)'}}>
-                {video.title.split(' - ')[0] || 'go4.video'}
+                {(video.title.split(' - ')[0] || 'go4.video').substring(0, 35)}
               </h3>
               <p className={`text-white/85 font-medium drop-shadow-xl transform group-hover:scale-105 transition-transform duration-300 ${isMobile ? 'text-base' : 'text-sm'}`} style={{fontFamily: 'Inter, sans-serif', textShadow: '1px 1px 4px rgba(0,0,0,0.8)'}}>
-                {video.title.split(' - ')[1] || video.title}
+                {(video.title.split(' - ')[1] || video.title).substring(0, 50)}
               </p>
             </div>
           </div>
@@ -312,7 +312,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
         <div className="mt-3 px-1">
           {/* Full title */}
           <h3 className="text-white font-bold text-base leading-tight mb-2" style={{fontFamily: 'Poppins, Inter, sans-serif'}}>
-            {video.title}
+            {video.title.length > 60 ? video.title.substring(0, 60) + '...' : video.title}
           </h3>
           
           {/* Views and Date in one line */}