From 8957c4079c81f5e89d5d4e3e03e97dbbb06df555 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 16:10:56 +0000
Subject: [PATCH] Start video grid with the first item visible on the left

Resets translateX to 0 in CategoryRow component's useEffect to display the first video on initial load, aligning with user expectation of seeing the first item.

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 | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index a8cc308..7dd170e 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -215,9 +215,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   // Initialize with first video on the left side  
   useEffect(() => {
     if (category.videos.length > 0) {
-      // Start at middle position for seamless loop
-      const totalWidth = category.videos.length * videoWidth;
-      setTranslateX(-totalWidth / 2);
+      // Start with video 1 visible on the left side
+      setTranslateX(0);
     }
   }, [category.videos.length]);