From bfcec08e41764d48b7ee831bb9ea111d8b887b64 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 12 Jan 2026 12:12:03 +0000
Subject: [PATCH] Enlarge video thumbnails in sidebars to match YouTube's style

Update `VideoPage.tsx` and `LivePage.tsx` to increase thumbnail dimensions and adjust related text styles for recommended videos in sidebars, improving visual consistency with YouTube's layout.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 401e2ec0-e00d-4f10-9d0e-60f3d479f9a5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 97217df8-1b92-46fd-bcfb-66d80a39e748
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/401e2ec0-e00d-4f10-9d0e-60f3d479f9a5/sfzzZxw
---
 client/src/pages/LivePage.tsx  | 19 ++++++++++---------
 client/src/pages/VideoPage.tsx | 19 ++++++++++---------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/client/src/pages/LivePage.tsx b/client/src/pages/LivePage.tsx
index ed11ac5..fd30e9e 100644
--- a/client/src/pages/LivePage.tsx
+++ b/client/src/pages/LivePage.tsx
@@ -484,7 +484,7 @@ export default function LivePage() {
             
             <h2 className="text-lg font-semibold text-bunny-light mb-4">Empfohlene Videos</h2>
             
-            <div className="space-y-2">
+            <div className="space-y-3">
               {videos.slice(0, 10).map((video: any) => (
                 <div
                   key={video.id}
@@ -492,9 +492,9 @@ export default function LivePage() {
                     const shortId = video.id.replace(/-/g, '').substring(0, 8);
                     window.location.href = `/video/${shortId}`;
                   }}
-                  className="flex gap-3 p-2 bg-bunny-gray/30 hover:bg-bunny-gray/50 rounded-lg cursor-pointer transition-colors"
+                  className="flex gap-3 hover:bg-bunny-gray/30 rounded-xl cursor-pointer transition-colors p-1"
                 >
-                  <div className="relative w-24 h-16 bg-gray-700 rounded overflow-hidden flex-shrink-0">
+                  <div className="relative w-[168px] h-[94px] bg-gray-700 rounded-xl overflow-hidden flex-shrink-0">
                     <img
                       src={video.thumbnailUrl}
                       alt={video.title}
@@ -505,19 +505,19 @@ export default function LivePage() {
                         if (target.parentElement && !target.parentElement.querySelector('.thumbnail-placeholder')) {
                           target.parentElement.style.background = 'linear-gradient(135deg, #1f2937, #374151)';
                           const placeholder = document.createElement('div');
-                          placeholder.className = 'thumbnail-placeholder absolute inset-0 flex items-center justify-center text-white text-xs';
+                          placeholder.className = 'thumbnail-placeholder absolute inset-0 flex items-center justify-center text-white text-2xl';
                           placeholder.innerHTML = '<div>🎬</div>';
                           target.parentElement.appendChild(placeholder);
                         }
                       }}
                     />
-                    <div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 py-0.5 rounded">
+                    <div className="absolute bottom-1 right-1 bg-black/80 text-white text-xs font-medium px-1.5 py-0.5 rounded">
                       {video.duration ? Math.floor(video.duration / 60) + ':' + String(video.duration % 60).padStart(2, '0') : '0:00'}
                     </div>
                   </div>
                   
-                  <div className="flex-1 min-w-0">
-                    <h3 className="text-sm font-medium text-bunny-light mb-1 line-clamp-2"
+                  <div className="flex-1 min-w-0 py-0.5">
+                    <h3 className="text-sm font-medium text-bunny-light mb-1 leading-tight"
                         style={{
                           display: '-webkit-box',
                           WebkitLineClamp: 2,
@@ -526,8 +526,9 @@ export default function LivePage() {
                         }}>
                       {video.title}
                     </h3>
-                    <div className="text-xs text-bunny-muted">
-                      <div>{video.views ? (video.views >= 1000 ? Math.floor(video.views / 1000) + 'K' : video.views) : '0'} views • {video.createdAt ? new Date(video.createdAt).toLocaleDateString('de-DE') : 'Unknown date'}</div>
+                    <div className="text-xs text-bunny-muted mt-1">
+                      <div>{video.views ? (video.views >= 1000 ? Math.floor(video.views / 1000) + 'K' : video.views) : '0'} Aufrufe</div>
+                      <div>{video.createdAt ? new Date(video.createdAt).toLocaleDateString('de-DE') : 'Unbekannt'}</div>
                     </div>
                   </div>
                 </div>
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index d3b70f9..e0e0324 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -782,7 +782,7 @@ export default function VideoPage() {
             
             <h2 className="text-lg font-semibold text-bunny-light mb-4">Empfohlene Videos</h2>
             
-            <div className="space-y-2">
+            <div className="space-y-3">
               {recommendedVideos.slice(0, 10).map((video) => (
                 <div
                   key={video.id}
@@ -790,9 +790,9 @@ export default function VideoPage() {
                     const shortId = video.id.replace(/-/g, '').substring(0, 8);
                     setLocation(`/video/${shortId}`);
                   }}
-                  className="flex gap-3 p-2 bg-bunny-gray/30 hover:bg-bunny-gray/50 rounded-lg cursor-pointer transition-colors"
+                  className="flex gap-3 hover:bg-bunny-gray/30 rounded-xl cursor-pointer transition-colors p-1"
                 >
-                  <div className="relative w-24 h-16 bg-gray-700 rounded overflow-hidden flex-shrink-0">
+                  <div className="relative w-[168px] h-[94px] bg-gray-700 rounded-xl overflow-hidden flex-shrink-0">
                     <img
                       src={video.thumbnailUrl}
                       alt={video.title}
@@ -805,19 +805,19 @@ export default function VideoPage() {
                         if (target.parentElement && !target.parentElement.querySelector('.thumbnail-placeholder')) {
                           target.parentElement.style.background = 'linear-gradient(135deg, #1f2937, #374151)';
                           const placeholder = document.createElement('div');
-                          placeholder.className = 'thumbnail-placeholder absolute inset-0 flex items-center justify-center text-white text-xs';
+                          placeholder.className = 'thumbnail-placeholder absolute inset-0 flex items-center justify-center text-white text-2xl';
                           placeholder.innerHTML = '<div>🎬</div>';
                           target.parentElement.appendChild(placeholder);
                         }
                       }}
                     />
-                    <div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 py-0.5 rounded">
+                    <div className="absolute bottom-1 right-1 bg-black/80 text-white text-xs font-medium px-1.5 py-0.5 rounded">
                       {formatDuration(video.duration)}
                     </div>
                   </div>
                   
-                  <div className="flex-1 min-w-0">
-                    <h3 className="text-sm font-medium text-bunny-light mb-1 line-clamp-2"
+                  <div className="flex-1 min-w-0 py-0.5">
+                    <h3 className="text-sm font-medium text-bunny-light mb-1 leading-tight"
                         style={{
                           display: '-webkit-box',
                           WebkitLineClamp: 2,
@@ -826,8 +826,9 @@ export default function VideoPage() {
                         }}>
                       {video.title}
                     </h3>
-                    <div className="text-xs text-bunny-muted">
-                      <div>{formatViews(video.views)} views • {formatDate(video.createdAt)}</div>
+                    <div className="text-xs text-bunny-muted mt-1">
+                      <div>{formatViews(video.views)} Aufrufe</div>
+                      <div>{formatDate(video.createdAt)}</div>
                     </div>
                   </div>
                 </div>