From 043f3f07f35f19db68f7cac6b92f2c4e7d9e51cd Mon Sep 17 00:00:00 2001
From: afkarxyz <mzamzamafkarhadiq@yahoo.com>
Date: Sun, 19 Apr 2026 21:48:25 +0700
Subject: [PATCH] .refine global scrollbar

---
 frontend/src/App.tsx   | 38 +++++++++++++++++++++++++++-----------
 frontend/src/index.css |  9 ++++++++-
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index bb1ae62..a653242 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useLayoutEffect } from "react";
+import { useState, useEffect, useCallback, useLayoutEffect, useRef } from "react";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog";
 import { Search, X, ArrowUp } from "lucide-react";
@@ -125,6 +125,7 @@ function parseStoredHistory(value: string | null): HistoryItem[] {
 }
 function App() {
     const [currentPage, setCurrentPage] = useState<PageType>("main");
+    const contentScrollRef = useRef<HTMLDivElement | null>(null);
     const [spotifyUrl, setSpotifyUrl] = useState("");
     const [selectedTracks, setSelectedTracks] = useState<string[]>([]);
     const [searchQuery, setSearchQuery] = useState("");
@@ -199,18 +200,31 @@ function App() {
         checkForUpdates();
         ensureApiStatusCheckStarted();
         void loadHistory();
-        const handleScroll = () => {
-            setShowScrollTop(window.scrollY > 300);
-        };
-        window.addEventListener("scroll", handleScroll);
         return () => {
             mediaQuery.removeEventListener("change", handleChange);
-            window.removeEventListener("scroll", handleScroll);
+        };
+    }, []);
+    useEffect(() => {
+        const contentElement = contentScrollRef.current;
+        if (!contentElement) {
+            return;
+        }
+        const handleScroll = () => {
+            setShowScrollTop(contentElement.scrollTop > 300);
+        };
+        handleScroll();
+        contentElement.addEventListener("scroll", handleScroll, { passive: true });
+        return () => {
+            contentElement.removeEventListener("scroll", handleScroll);
         };
     }, []);
     const scrollToTop = useCallback(() => {
-        window.scrollTo({ top: 0, behavior: "smooth" });
+        contentScrollRef.current?.scrollTo({ top: 0, behavior: "smooth" });
     }, []);
+    useEffect(() => {
+        contentScrollRef.current?.scrollTo({ top: 0, behavior: "auto" });
+        setShowScrollTop(false);
+    }, [currentPage]);
     useEffect(() => {
         setSelectedTracks([]);
         setSearchQuery("");
@@ -584,14 +598,16 @@ function App() {
         }
     };
     return (<TooltipProvider>
-        <div className="min-h-screen bg-background flex flex-col">
+        <div className="h-screen overflow-hidden bg-background">
             <TitleBar />
             <Sidebar currentPage={currentPage} onPageChange={handlePageChange}/>
 
 
-            <div className="flex-1 ml-14 mt-10 p-4 md:p-8">
-                <div className="max-w-4xl mx-auto space-y-6">
-                    {renderPage()}
+            <div ref={contentScrollRef} className="fixed top-10 right-0 bottom-0 left-14 overflow-y-auto overflow-x-hidden">
+                <div className="p-4 md:p-8">
+                    <div className="max-w-4xl mx-auto space-y-6">
+                        {renderPage()}
+                    </div>
                 </div>
             </div>
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 4698284..dbb2340 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -73,6 +73,13 @@
 }
 
 @layer base {
+  html,
+  body,
+  #root {
+    height: 100%;
+    overflow: hidden;
+  }
+
   * {
     @apply border-border outline-ring/50;
   }
@@ -265,4 +272,4 @@
 
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
   filter: brightness(1.2);
-}
\ No newline at end of file
+}