fix types

leoweigand · leoweigand · commit ed3d914af58c · 2025-09-10T14:23:41.000+02:00
diff --git a/web/src/components/trace/IOPreview.tsx b/web/src/components/trace/IOPreview.tsx
@@ -56,9 +56,8 @@ export const IOPreview: React.FC<{
   const capture = usePostHogClientCapture();
   const input = deepParseJson(props.input);
   const output = deepParseJson(props.output);
-  const [tabsRef, startPreserveScroll] = usePreserveRelativeScroll([
-    selectedView,
-  ]);
+  const [compensateScrollRef, startPreserveScroll] =
+    usePreserveRelativeScroll<HTMLDivElement>([selectedView]);
 
   // parse old completions: { completion: string } -> string
   const outLegacyCompletionSchema = z
@@ -122,7 +121,7 @@ export const IOPreview: React.FC<{
       {isPrettyViewAvailable && !currentView ? (
         <div className="flex w-full flex-row justify-start">
           <Tabs
-            ref={tabsRef}
+            ref={compensateScrollRef}
             className="h-fit py-0.5"
             value={selectedView}
             onValueChange={(value) => {
diff --git a/web/src/hooks/usePreserveRelativeScroll.ts b/web/src/hooks/usePreserveRelativeScroll.ts
@@ -42,15 +42,15 @@ export interface UsePreserveRelativeScrollOptions {
  * (for example, the selected tab value). Provide stable, memoized values; avoid passing
  * freshly created objects or inline functions.
  */
-export function usePreserveRelativeScroll(
+export function usePreserveRelativeScroll<T extends Element = Element>(
   layoutDeps: ReadonlyArray<unknown> = [],
   options?: UsePreserveRelativeScrollOptions,
-): [React.RefObject<Element>, () => void] {
+): [React.RefObject<T | null>, () => void] {
   const enabled = options?.enabled ?? true;
   const beforeTopRef = useRef<number | null>(null);
   const targetRef = useRef<ScrollTarget | null>(null);
   const didUserScrollRef = useRef<boolean>(false);
-  const elementRef = useRef<Element | null>(null);
+  const elementRef = useRef<T | null>(null);
   const compensatedRef = useRef<boolean>(false);
 
   const attachScrollListener = useCallback(() => {
@@ -114,7 +114,7 @@ export function usePreserveRelativeScroll(
   }, []);
 
   const performCompensation = useCallback(
-    (element: Element) => {
+    (element: T) => {
       if (compensatedRef.current) return;
       const beforeTop = beforeTopRef.current;
       const target = targetRef.current;
