refactor: optimize Topbar scroll listener; sync WIP ecommerce refactor and CSS

src/components/Topbar.tsx

@@ -39,38 +39,32 @@ export function Topbar({
 
   useEffect(() => {
     let restoreTimer: number | undefined;
-    let cleanupScrollTarget: (() => void) | undefined;
 
-    const bindScrollTarget = () => {
-      cleanupScrollTarget?.();
-      const target = document.querySelector<HTMLElement>(
-        ".ecommerce-standalone__page--workspace:not([hidden]) .clone-ai-preview",
-      );
-      if (!target) {
-        cleanupScrollTarget = undefined;
-        return;
-      }
+    const handleScroll = (event: Event) => {
+      if (profileMenuOpen) return;
+      const target = event.target;
+      const activeWorkspace = document.querySelector<HTMLElement>(".ecommerce-standalone__page--workspace:not([hidden])");
+      if (!activeWorkspace) return;
+      const isWorkspacePreviewScroll =
+        target instanceof HTMLElement && target.classList.contains("clone-ai-preview") && activeWorkspace.contains(target);
+      const isPageScroll =
+        target === document ||
+        target === document.scrollingElement ||
+        target === document.documentElement ||
+        target === document.body;
+      if (!isWorkspacePreviewScroll && !isPageScroll) return;
 
-      const handleScroll = () => {
-        if (profileMenuOpen) return;
-        setIsTopbarHidden(true);
-        if (restoreTimer) window.clearTimeout(restoreTimer);
-        restoreTimer = window.setTimeout(() => {
-          setIsTopbarHidden(false);
-        }, 240);
-      };
-
-      target.addEventListener("scroll", handleScroll, { passive: true });
-      cleanupScrollTarget = () => target.removeEventListener("scroll", handleScroll);
+      setIsTopbarHidden(true);
+      if (restoreTimer) window.clearTimeout(restoreTimer);
+      restoreTimer = window.setTimeout(() => {
+        setIsTopbarHidden(false);
+      }, 240);
     };
 
-    bindScrollTarget();
-    const observer = new MutationObserver(bindScrollTarget);
-    observer.observe(document.body, { attributes: true, childList: true, subtree: true });
+    window.addEventListener("scroll", handleScroll, { capture: true, passive: true });
 
     return () => {
-      cleanupScrollTarget?.();
-      observer.disconnect();
+      window.removeEventListener("scroll", handleScroll, { capture: true });
       if (restoreTimer) window.clearTimeout(restoreTimer);
     };
   }, [profileMenuOpen]);