From 1487ab3602e39f9a7b0c0bdf2bbcbb441d2d8b59 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Tue, 2 Sep 2025 10:50:13 +0000
Subject: [PATCH] Improve video card display by reordering title and artist
 information

Reorder elements in the VideoCard component to display artist above the song title, matching user preference.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/S0hX96S
---
 client/src/components/video-card.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 3595e17..de13280 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -213,12 +213,12 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
         {!showPreview && !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 text-xl mb-2 leading-tight drop-shadow-2xl tracking-wide transform group-hover:scale-105 transition-transform duration-300" style={{fontFamily: 'Poppins, Inter, sans-serif', textShadow: '2px 2px 8px rgba(0,0,0,0.8)'}}>
-                {video.title.split(' - ')[1] || video.title}
-              </h3>
-              <p className="text-white/95 text-base font-bold drop-shadow-xl transform group-hover:scale-105 transition-transform duration-300" style={{fontFamily: 'Inter, sans-serif', textShadow: '1px 1px 4px rgba(0,0,0,0.8)'}}>
+              <p className="text-white/95 text-base font-bold drop-shadow-xl transform group-hover:scale-105 transition-transform duration-300 mb-1" style={{fontFamily: 'Inter, sans-serif', textShadow: '1px 1px 4px rgba(0,0,0,0.8)'}}>
                 {video.title.split(' - ')[0] || 'go4.video'}
               </p>
+              <h3 className="text-white font-extrabold text-xl leading-tight drop-shadow-2xl tracking-wide transform group-hover:scale-105 transition-transform duration-300" style={{fontFamily: 'Poppins, Inter, sans-serif', textShadow: '2px 2px 8px rgba(0,0,0,0.8)'}}>
+                {video.title.split(' - ')[1] || video.title}
+              </h3>
             </div>
           </div>
         )}