From 2a300c0d59ca1b5ca7be3c027ca4838c77930962 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Wed, 17 Sep 2025 07:26:15 +0000
Subject: [PATCH] Refine video card display for improved mobile and desktop
 presentation

Remove conditional rendering for gradient overlay and adjust mobile info section in VideoCard component.

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/HwcENYL
---
 .replit                              |  4 ++++
 client/src/components/video-card.tsx | 14 +++-----------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/.replit b/.replit
index 6ce283d..26faa66 100644
--- a/.replit
+++ b/.replit
@@ -15,6 +15,10 @@ run = ["npm", "run", "start"]
 localPort = 5000
 externalPort = 80
 
+[[ports]]
+localPort = 38701
+externalPort = 3000
+
 [env]
 PORT = "5000"
 
diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 4bebe92..8e2e6b4 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -323,8 +323,8 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
         )}
         
         
-        {/* Desktop gradient overlay with title - hidden on mobile video pages */}
-        {!showPreview && !hideOverlay && !(isMobile && isVideoPage) && (
+        {/* Gradient overlay with title */}
+        {!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">
               {/* Artist/Performer in UPPERCASE - first line */}
@@ -340,17 +340,9 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
         )}
       </div>
       
-      {/* Mobile info section - below video - only on video pages */}
+      {/* Mobile additional info section - below video - only on video pages */}
       {isMobile && isVideoPage && (
         <div className="mt-3 px-1">
-          {/* Artist/Performer in UPPERCASE - first line */}
-          <h3 className="text-white font-bold text-base leading-tight mb-1 uppercase" style={{fontFamily: 'Poppins, Inter, sans-serif'}}>
-            {(video.title.split(' - ')[0] || 'video.folx.tv').length > 30 ? (video.title.split(' - ')[0] || 'video.folx.tv').substring(0, 30) + '...' : (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.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">