From 18b976ccc53a6121556ed66363b147762604c7a7 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 10 Jan 2026 16:57:09 +0000
Subject: [PATCH] Fix video thumbnail display issues and improve category row
 rendering

Corrected an "Invalid hook call" warning by ensuring the key prop is applied to the outermost element in the video mapping of the CategoryRow component in `netflix-grid.tsx`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 401e2ec0-e00d-4f10-9d0e-60f3d479f9a5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: b8a18225-2a77-4482-93d7-b918832f4401
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/401e2ec0-e00d-4f10-9d0e-60f3d479f9a5/QA9iJJ7
---
 client/src/components/netflix-grid.tsx | 59 ++++++++++++--------------
 1 file changed, 28 insertions(+), 31 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index c87035e..3af6859 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -433,38 +433,35 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
           onTouchEnd={handleTouchEnd}
         >
           {category.videos.map((video, index) => (
-            <>
-              <div 
-                key={video.id} 
-                className="flex-shrink-0 w-[calc(100vw-1.5rem)] sm:w-[330px] relative hover:z-50"
-                style={{ 
-                  scrollSnapAlign: window.innerWidth < 768 ? 'start' : 'none'
+            <div 
+              key={video.id} 
+              className="flex-shrink-0 w-[calc(100vw-1.5rem)] sm:w-[330px] relative hover:z-50"
+              style={{ 
+                scrollSnapAlign: window.innerWidth < 768 ? 'start' : 'none'
+              }}
+              onMouseEnter={() => setClickedVideoId(video.id)}
+            >
+              {/* Top 10 Number overlay for "Meist Angesehen" category - visible on all devices */}
+              {category.title.includes("Meist Angesehen") && index < 10 && clickedVideoId !== video.id && (
+                <div className="absolute top-0 left-2 z-20 text-white font-black text-5xl sm:text-6xl md:text-7xl drop-shadow-2xl transition-opacity duration-300"
+                     style={{ 
+                       textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
+                       WebkitTextStroke: '2px rgba(0,0,0,0.8)',
+                       fontFeatureSettings: 'normal',
+                       fontVariantNumeric: 'normal'
+                     }}>
+                  {(index + 1).toString()}
+                </div>
+              )}
+              <VideoCard
+                video={video}
+                onClick={(video) => {
+                  setClickedVideoId(video.id);
+                  onVideoClick(video);
                 }}
-                onMouseEnter={() => setClickedVideoId(video.id)}
-              >
-                {/* Top 10 Number overlay for "Meist Angesehen" category - visible on all devices */}
-                {category.title.includes("Meist Angesehen") && index < 10 && clickedVideoId !== video.id && (
-                  <div className="absolute top-0 left-2 z-20 text-white font-black text-5xl sm:text-6xl md:text-7xl drop-shadow-2xl transition-opacity duration-300"
-                       style={{ 
-                         textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
-                         WebkitTextStroke: '2px rgba(0,0,0,0.8)',
-                         fontFeatureSettings: 'normal',
-                         fontVariantNumeric: 'normal'
-                       }}>
-                    {(index + 1).toString()}
-                  </div>
-                )}
-                <VideoCard
-                  video={video}
-                  onClick={(video) => {
-                    setClickedVideoId(video.id);
-                    onVideoClick(video);
-                  }}
-                  className="w-full hover:scale-102 md:hover:scale-105 hover:z-50 transition-all duration-300 md:duration-500 hover:shadow-2xl rounded-lg overflow-hidden"
-                />
-              </div>
-              
-            </>
+                className="w-full hover:scale-102 md:hover:scale-105 hover:z-50 transition-all duration-300 md:duration-500 hover:shadow-2xl rounded-lg overflow-hidden"
+              />
+            </div>
           ))}
         </div>