Improve carousel by scrolling to the middle on load

Initialize SimpleCarousel component to scroll to the middle of the category videos on mount using `useEffect` and `setTimeout` to ensure content is rendered before scrolling.

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/yexZbDm

client/src/components/simple-carousel.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import { type Video } from "@shared/schema";
 import VideoCard from "./video-card";
 import { ChevronLeft, ChevronRight } from "lucide-react";
@@ -53,6 +53,25 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
     setIsScrolling(false);
   };
 
+  // Initialize scroll position in the middle so we can scroll both ways
+  useEffect(() => {
+    if (scrollContainerRef.current && category.videos.length > 0) {
+      // Wait for content to load, then scroll to middle
+      setTimeout(() => {
+        if (scrollContainerRef.current) {
+          const containerWidth = scrollContainerRef.current.scrollWidth;
+          const viewportWidth = scrollContainerRef.current.clientWidth;
+          const middlePosition = (containerWidth - viewportWidth) / 2;
+          
+          scrollContainerRef.current.scrollTo({
+            left: middlePosition,
+            behavior: 'auto'
+          });
+        }
+      }, 100);
+    }
+  }, [category.videos.length]);
+
   return (
     <div className="relative group mb-8">
       <h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">