From 3041bdecc344e1b3c81a405e11581182e65d53f3 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 15:37:11 +0000
Subject: [PATCH] Set the first video to display on the right side of the
 screen

Adjust `CategoryRow` initialization in `netflix-grid.tsx` to position the first video on the right side of the visible area by calculating an offset based on the number of videos and video width.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/QCN70f2
---
 client/src/components/netflix-grid.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index b3778ed..61d926b 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -174,10 +174,12 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
     }, 12); // Update every 12ms for buttery smooth flow
   };
 
-  // Initialize in middle section for infinite scroll
+  // Initialize with first video on the right side
   useEffect(() => {
     if (category.videos.length > 0) {
-      setTranslateX(-category.videos.length * videoWidth); // Start in middle section
+      // Position so first video appears on the right side of visible area
+      const rightPosition = -(category.videos.length * videoWidth) + (videoWidth * 4);
+      setTranslateX(rightPosition);
     }
   }, [category.videos.length]);