sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shorten video titles displayed on cards for better readability

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-09-03 11:10:13 +00:00
parent 258383ce36
commit dc20d4a07a
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/video-card.tsx
View File

@ -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="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"> <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)'}}> <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> </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)'}}> <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> </p>
</div> </div>
</div> </div>
@ -312,7 +312,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
<div className="mt-3 px-1"> <div className="mt-3 px-1">
{/* Full title */} {/* Full title */}
<h3 className="text-white font-bold text-base leading-tight mb-2" style={{fontFamily: 'Poppins, Inter, sans-serif'}}> <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> </h3>
{/* Views and Date in one line */} {/* Views and Date in one line */}