From 4ee92b9c9e622d40e10144e766296c9b8f73e5bf Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Tue, 2 Sep 2025 16:12:47 +0000
Subject: [PATCH] Improve video details display for mobile users

Update text sizes and line clamping for video titles, descriptions, and metadata on mobile devices. Add "read more" functionality for truncated descriptions.

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/4DOsXkx
---
 client/src/components/video-card.tsx | 32 ++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 9665958..33dabb4 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -309,34 +309,48 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
       {isMobile && isVideoPage && (
         <div className="mt-3 px-1">
           {/* Full title */}
-          <h3 className="text-white font-bold text-sm leading-5 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}
           </h3>
           
           {/* Views and Date in one line */}
-          <div className="flex items-center justify-between text-white/70 text-xs mb-2">
+          <div className="flex items-center justify-between text-white/70 text-sm mb-2">
             <span>{formatViews(video.views || 0)}</span>
             <span>{formatDate(video.createdAt)}</span>
           </div>
           
           {/* Description with expand/collapse */}
           {(video.title.split(' - ')[1] || video.description) && (
-            <div className="text-white/70 text-xs leading-relaxed">
-              <div className="flex items-start">
-                <p className={`flex-1 ${showMoreInfo ? '' : 'line-clamp-2'}`}>
+            <div className="text-white/70 text-sm">
+              <div className="flex items-end">
+                <p className={`flex-1 ${showMoreInfo ? '' : 'line-clamp-1'}`}>
                   {video.title.split(' - ')[1] || video.description || ''}
                 </p>
+                {!showMoreInfo && (
+                  <button 
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setShowMoreInfo(true);
+                    }}
+                    className="ml-1 text-blue-400 hover:text-blue-300 text-sm transition-colors duration-200 flex-shrink-0"
+                  >
+                    preberi več
+                  </button>
+                )}
+              </div>
+              {showMoreInfo && (
                 <button 
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    setShowMoreInfo(!showMoreInfo);
+                    setShowMoreInfo(false);
                   }}
-                  className="ml-2 text-white/60 hover:text-white/80 text-xs transition-colors duration-200 flex-shrink-0 font-medium"
+                  className="mt-2 text-blue-400 hover:text-blue-300 text-sm transition-colors duration-200"
                 >
-                  {showMoreInfo ? 'weniger' : 'mehr'}
+                  pokaži manj
                 </button>
-              </div>
+              )}
             </div>
           )}
         </div>