V48 Gate 3 (implementation-only): explainer tooltips scroll their overflow instead of clipping it

The base tooltip (BitcodeInlineExplainer + TelemetryExplainerTrigger)
was pointer-events-none, so content past the viewport-capped maxHeight
clipped unreachably. Tooltips are now interactive: pointer-events-auto
with overscroll-contain, a 160ms hide grace so the pointer can travel
from trigger into the tooltip, hover inside cancels the hide, and the
scroll-capture dismisser ignores scrolls originating INSIDE the tooltip
(that is how the overflow is read); page scrolls/resizes still dismiss.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: geraldarthurdavis

uapi/components/base/bitcode/execution/BitcodeInlineExplainer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { cn } from '@bitcode/styling';
@@ -156,39 +156,75 @@ export default function BitcodeInlineExplainer({
     setIsMounted(true);
   }, []);
 
+  const tooltipRef = useRef<HTMLSpanElement | null>(null);
+  const hideTimeoutRef = useRef<number | null>(null);
+
+  const cancelScheduledHide = useCallback(() => {
+    if (hideTimeoutRef.current !== null) {
+      window.clearTimeout(hideTimeoutRef.current);
+      hideTimeoutRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => cancelScheduledHide, [cancelScheduledHide]);
+
+  const hideTooltipNow = useCallback(() => {
+    cancelScheduledHide();
+    setIsVisible(false);
+  }, [cancelScheduledHide]);
+
   useEffect(() => {
     if (!isVisible) return undefined;
 
-    const hideTooltip = () => setIsVisible(false);
-    window.addEventListener('scroll', hideTooltip, true);
-    window.addEventListener('resize', hideTooltip);
+    // Scrolls INSIDE the tooltip must not dismiss it — that is how
+    // overflowing explainer content is read (the tooltip is viewport-height
+    // capped and scrolls). Page scrolls and resizes still dismiss.
+    const hideOnViewportChange = (event: Event) => {
+      if (
+        tooltipRef.current &&
+        event.target instanceof Node &&
+        tooltipRef.current.contains(event.target)
+      ) {
+        return;
+      }
+      hideTooltipNow();
+    };
+    window.addEventListener('scroll', hideOnViewportChange, true);
+    window.addEventListener('resize', hideTooltipNow);
     return () => {
-      window.removeEventListener('scroll', hideTooltip, true);
-      window.removeEventListener('resize', hideTooltip);
+      window.removeEventListener('scroll', hideOnViewportChange, true);
+      window.removeEventListener('resize', hideTooltipNow);
     };
-  }, [isVisible]);
+  }, [hideTooltipNow, isVisible]);
 
   const showTooltip = useCallback(
     (event: React.SyntheticEvent<HTMLElement>) => {
+      cancelScheduledHide();
       const trigger = event.currentTarget.querySelector('button');
       if (trigger instanceof HTMLElement) {
         setPlacement(resolveExplainerPlacement(trigger, side));
         setIsVisible(true);
       }
     },
-    [side],
+    [cancelScheduledHide, side],
   );
 
+  // Grace period so the pointer can travel from the trigger into the
+  // tooltip to scroll overflowing content without the tooltip vanishing.
   const hideTooltip = useCallback(() => {
-    setIsVisible(false);
-  }, []);
+    cancelScheduledHide();
+    hideTimeoutRef.current = window.setTimeout(() => setIsVisible(false), 160);
+  }, [cancelScheduledHide]);
 
   const tooltipMarkup = isMounted && isVisible
     ? createPortal(
       <span
         role="tooltip"
+        ref={tooltipRef}
+        onMouseEnter={cancelScheduledHide}
+        onMouseLeave={hideTooltipNow}
         className={cn(
-          'pointer-events-none fixed z-[90] overflow-y-auto rounded-[1.15rem] border border-white/10 bg-[rgba(4,8,18,0.98)] px-4 py-4 text-left text-sm font-normal normal-case tracking-normal opacity-100 shadow-[0_24px_56px_rgba(0,0,0,0.42)] transition duration-150 ease-out',
+          'pointer-events-auto fixed z-[90] overflow-y-auto overscroll-contain rounded-[1.15rem] border border-white/10 bg-[rgba(4,8,18,0.98)] px-4 py-4 text-left text-sm font-normal normal-case tracking-normal opacity-100 shadow-[0_24px_56px_rgba(0,0,0,0.42)] transition duration-150 ease-out',
         )}
         style={tooltipPositionStyle(placement)}
       >

uapi/components/base/bitcode/execution/TelemetryExplainerTrigger.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { cn } from '@bitcode/styling';
@@ -45,37 +45,74 @@ export function TelemetryExplainerTrigger({
 }: TelemetryExplainerTriggerProps) {
   const [placement, setPlacement] = useState<TooltipPlacement | null>(null);
   const [isMounted, setIsMounted] = useState(false);
+  const tooltipRef = useRef<HTMLSpanElement | null>(null);
+  const hideTimeoutRef = useRef<number | null>(null);
 
   useEffect(() => {
     setIsMounted(true);
   }, []);
 
+  const cancelScheduledHide = useCallback(() => {
+    if (hideTimeoutRef.current !== null) {
+      window.clearTimeout(hideTimeoutRef.current);
+      hideTimeoutRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => cancelScheduledHide, [cancelScheduledHide]);
+
+  const hideTooltipNow = useCallback(() => {
+    cancelScheduledHide();
+    setPlacement(null);
+  }, [cancelScheduledHide]);
+
   useEffect(() => {
     if (!placement) return undefined;
-    const hideTooltip = () => setPlacement(null);
-    window.addEventListener('scroll', hideTooltip, true);
-    window.addEventListener('resize', hideTooltip);
+    // Scrolls INSIDE the tooltip must not dismiss it — that is how
+    // overflowing content is read (the tooltip is viewport-height capped
+    // and scrolls). Page scrolls and resizes still dismiss.
+    const hideOnViewportChange = (event: Event) => {
+      if (
+        tooltipRef.current &&
+        event.target instanceof Node &&
+        tooltipRef.current.contains(event.target)
+      ) {
+        return;
+      }
+      hideTooltipNow();
+    };
+    window.addEventListener('scroll', hideOnViewportChange, true);
+    window.addEventListener('resize', hideTooltipNow);
     return () => {
-      window.removeEventListener('scroll', hideTooltip, true);
-      window.removeEventListener('resize', hideTooltip);
+      window.removeEventListener('scroll', hideOnViewportChange, true);
+      window.removeEventListener('resize', hideTooltipNow);
     };
-  }, [placement]);
+  }, [hideTooltipNow, placement]);
 
   const showTooltip = useCallback(
     (event: React.SyntheticEvent<HTMLElement>) => {
+      cancelScheduledHide();
       setPlacement(resolveExplainerPlacement(event.currentTarget, side));
     },
-    [side],
+    [cancelScheduledHide, side],
   );
 
-  const hideTooltip = useCallback(() => setPlacement(null), []);
+  // Grace period so the pointer can travel from the trigger into the
+  // tooltip to scroll overflowing content without the tooltip vanishing.
+  const hideTooltip = useCallback(() => {
+    cancelScheduledHide();
+    hideTimeoutRef.current = window.setTimeout(() => setPlacement(null), 160);
+  }, [cancelScheduledHide]);
 
   const tooltipMarkup =
     isMounted && placement
       ? createPortal(
         <span
           role="tooltip"
-          className="pointer-events-none fixed z-[90] overflow-y-auto rounded-[1.15rem] border border-white/10 bg-[rgba(4,8,18,0.98)] px-4 py-4 text-left text-sm font-normal normal-case tracking-normal opacity-100 shadow-[0_24px_56px_rgba(0,0,0,0.42)] transition duration-150 ease-out"
+          ref={tooltipRef}
+          onMouseEnter={cancelScheduledHide}
+          onMouseLeave={hideTooltipNow}
+          className="pointer-events-auto fixed z-[90] overflow-y-auto overscroll-contain rounded-[1.15rem] border border-white/10 bg-[rgba(4,8,18,0.98)] px-4 py-4 text-left text-sm font-normal normal-case tracking-normal opacity-100 shadow-[0_24px_56px_rgba(0,0,0,0.42)] transition duration-150 ease-out"
           style={tooltipPositionStyle(placement)}
         >
           <span