From 24f27b0e87e035985ee301582a6e9452c01e9ef5 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Wed, 17 Sep 2025 07:20:54 +0000
Subject: [PATCH] Improve video card display to show artist and song title on
 separate lines

Update client/src/components/video-card.tsx to display the artist on the first line in uppercase and the song title on the second line, addressing UI issues reported by users.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 45a1dcfc-f8a2-475a-a6b9-96fbb841dc27
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/45a1dcfc-f8a2-475a-a6b9-96fbb841dc27/pjFeepJ
---
 client/src/components/video-card.tsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 9724c23..104b2ed 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -327,11 +327,13 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
         {!showPreview && !hideOverlay && !(isMobile && isVideoPage) && (
           <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] || 'video.folx.tv').substring(0, 35)}
+              {/* Artist in UPPERCASE - first line */}
+              <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'} uppercase`} style={{fontFamily: 'Poppins, Inter, sans-serif', textShadow: '2px 2px 8px rgba(0,0,0,0.8)'}}>
+                {video.artist ? video.artist.substring(0, 35) : (video.title.split(' - ')[0] || 'video.folx.tv').substring(0, 35)}
               </h3>
+              {/* Song title - second line */}
               <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).substring(0, 50)}
+                {video.artist ? video.title.substring(0, 50) : (video.title.split(' - ')[1] || video.title).substring(0, 50)}
               </p>
             </div>
           </div>
@@ -341,10 +343,17 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
       {/* Mobile info section - below video - only on video pages */}
       {isMobile && isVideoPage && (
         <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.length > 60 ? video.title.substring(0, 60) + '...' : video.title}
+          {/* Artist in UPPERCASE - first line */}
+          <h3 className="text-white font-bold text-base leading-tight mb-1 uppercase" style={{fontFamily: 'Poppins, Inter, sans-serif'}}>
+            {video.artist ? (video.artist.length > 30 ? video.artist.substring(0, 30) + '...' : video.artist) : (video.title.split(' - ')[0] || 'video.folx.tv')}
           </h3>
+          {/* Song title - second line */}
+          <h4 className="text-white/85 font-medium text-sm leading-tight mb-2" style={{fontFamily: 'Inter, sans-serif'}}>
+            {video.artist ? 
+              (video.title.length > 40 ? video.title.substring(0, 40) + '...' : video.title) :
+              (video.title.split(' - ')[1] || video.title).length > 40 ? (video.title.split(' - ')[1] || video.title).substring(0, 40) + '...' : (video.title.split(' - ')[1] || video.title)
+            }
+          </h4>
           
           {/* Views and Date in one line */}
           <div className="flex items-center justify-between text-white/70 text-sm mb-2">