From 2c38c31b5f6b4f48c5f35e59fe3bae149d0cf61d Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Sun, 9 Mar 2025 14:34:53 -0600
Subject: [PATCH] fix scroll to section

---
 .../discover/components/LazyMediaCarousel.tsx | 15 ++++++-----
 .../discover/components/MediaCarousel.tsx     |  2 +-
 src/pages/discover/discoverContent.tsx        | 25 ++++++++++---------
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/pages/discover/components/LazyMediaCarousel.tsx b/src/pages/discover/components/LazyMediaCarousel.tsx
index d41c8a06..023eaf28 100644
--- a/src/pages/discover/components/LazyMediaCarousel.tsx
+++ b/src/pages/discover/components/LazyMediaCarousel.tsx
@@ -52,6 +52,7 @@ export function LazyMediaCarousel({
   }, [media, preloadedMedia]);
 
   const categoryName = title || category?.name || genre?.name || "";
+  const categorySlug = categoryName.toLowerCase().replace(/[^a-z0-9]+/g, "-");
 
   // Test intersection observer
   // useEffect(() => {
@@ -73,12 +74,14 @@ export function LazyMediaCarousel({
         />
       ) : (
         <div className="relative overflow-hidden carousel-container">
-          <h2 className="ml-2 md:ml-8 mt-2 text-2xl cursor-default font-bold text-white md:text-2xl mx-auto pl-5 text-balance">
-            {categoryName} {mediaType === "tv" ? "Shows" : "Movies"}
-          </h2>
-          <div className="flex whitespace-nowrap pt-0 pb-4 overflow-auto scrollbar rounded-xl overflow-y-hidden h-[300px] animate-pulse bg-background-secondary/20">
-            <div className="w-full text-center flex items-center justify-center">
-              {isLoading ? "Loading..." : ""}
+          <div id={`carousel-${categorySlug}`}>
+            <h2 className="ml-2 md:ml-8 mt-2 text-2xl cursor-default font-bold text-white md:text-2xl mx-auto pl-5 text-balance">
+              {categoryName} {mediaType === "tv" ? "Shows" : "Movies"}
+            </h2>
+            <div className="flex whitespace-nowrap pt-0 pb-4 overflow-auto scrollbar rounded-xl overflow-y-hidden h-[300px] animate-pulse bg-background-secondary/20">
+              <div className="w-full text-center flex items-center justify-center">
+                {isLoading ? "Loading..." : ""}
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/pages/discover/components/MediaCarousel.tsx b/src/pages/discover/components/MediaCarousel.tsx
index 2e8b3374..ff5e9c32 100644
--- a/src/pages/discover/components/MediaCarousel.tsx
+++ b/src/pages/discover/components/MediaCarousel.tsx
@@ -31,7 +31,7 @@ export function MediaCarousel({
   isMobile,
   carouselRefs,
 }: MediaCarouselProps) {
-  const categorySlug = `${category.toLowerCase().replace(/ /g, "-")}`;
+  const categorySlug = category.toLowerCase().replace(/[^a-z0-9]+/g, "-");
   const browser = !!window.chrome;
   let isScrolling = false;
 
diff --git a/src/pages/discover/discoverContent.tsx b/src/pages/discover/discoverContent.tsx
index 194c607c..71e51e16 100644
--- a/src/pages/discover/discoverContent.tsx
+++ b/src/pages/discover/discoverContent.tsx
@@ -287,6 +287,18 @@ export function DiscoverContent() {
     }
   };
 
+  const handleCategoryClick = (id: string, name: string) => {
+    const categorySlug = name.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+    const element = document.getElementById(`carousel-${categorySlug}`);
+
+    if (element) {
+      element.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
+  };
+
   // Render Editor Picks content
   const renderEditorPicksContent = () => {
     return (
@@ -444,18 +456,7 @@ export function DiscoverContent() {
                     ? [...categories, ...genres]
                     : [...tvCategories, ...tvGenres]
                 }
-                onCategoryClick={(id, name) => {
-                  const element = document.getElementById(
-                    `carousel-${name.toLowerCase().replace(/ /g, "-")}`,
-                  );
-                  if (element) {
-                    element.scrollIntoView({
-                      behavior: "smooth",
-                      block: "center",
-                      inline: "center",
-                    });
-                  }
-                }}
+                onCategoryClick={handleCategoryClick}
                 categoryType="movies"
                 isMobile={isMobile}
                 showAlwaysScroll