From c05ab7a3883c387380253865e8b468ec0050c6f1 Mon Sep 17 00:00:00 2001
From: alejandrobailo <alejandrobailo94@gmail.com>
Date: Tue, 24 Feb 2026 16:30:44 +0100
Subject: [PATCH] fix(ui): use ResizeObserver in useScrollHint to prevent false
 positives

Replace requestAnimationFrame + window resize listener with
ResizeObserver on the container element. The single rAF fired before
content was fully laid out, causing the scroll hint to appear when
there was no overflow. Bump threshold from 2px to 4px to avoid
sub-pixel rounding noise.
---
 ui/hooks/use-scroll-hint.ts | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/ui/hooks/use-scroll-hint.ts b/ui/hooks/use-scroll-hint.ts
index ba50f629b8..4d18c10d30 100644
--- a/ui/hooks/use-scroll-hint.ts
+++ b/ui/hooks/use-scroll-hint.ts
@@ -7,7 +7,7 @@ interface UseScrollHintOptions {
   refreshToken?: string | number;
 }
 
-const SCROLL_THRESHOLD_PX = 2;
+const SCROLL_THRESHOLD_PX = 4;
 
 function shouldShowScrollHint(element: HTMLDivElement) {
   const hasOverflow =
@@ -32,22 +32,22 @@ export function useScrollHint({
       return;
     }
 
-    const frame = requestAnimationFrame(() => {
-      const element = containerRef.current;
-      if (!element) return;
-      setShowScrollHint(shouldShowScrollHint(element));
-    });
+    const element = containerRef.current;
+    if (!element) return;
 
-    const handleResize = () => {
-      const element = containerRef.current;
-      if (!element) return;
-      setShowScrollHint(shouldShowScrollHint(element));
+    const recalculate = () => {
+      const el = containerRef.current;
+      if (!el) return;
+      setShowScrollHint(shouldShowScrollHint(el));
     };
 
-    window.addEventListener("resize", handleResize);
+    const observer = new ResizeObserver(recalculate);
+    observer.observe(element);
+
+    recalculate();
+
     return () => {
-      cancelAnimationFrame(frame);
-      window.removeEventListener("resize", handleResize);
+      observer.disconnect();
     };
   }, [enabled, refreshToken]);