update

hooks/useHeightVar.ts

@@ -9,21 +9,28 @@ export function useHeightVar(
   cssVarName: string,
   mode: Mode = "scroll",
   trigger?: unknown,
+  targetRef?: React.RefObject<HTMLElement | null>,
 ) {
   useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
+    const target = targetRef?.current ?? el;
 
     const measure = () => {
       const h = mode === "scroll" ? el.scrollHeight : el.offsetHeight;
-      el.style.setProperty(cssVarName, `${h}px`);
+
+      target.style.setProperty(cssVarName, `${h}px`);
     };
 
     measure();
 
+    // Observe el (the unclipped content), not target: if target is the
+    // element whose max-height is being CSS-transitioned, observing it
+    // directly re-triggers measure() on every layout step of the
+    // transition, fighting the animation (visible as stutter in Firefox).
     const ro = new ResizeObserver(measure);
     ro.observe(el);
 
     return () => ro.disconnect();
-  }, [ref, cssVarName, mode, trigger]);
-}
+  }, [ref, targetRef, cssVarName, mode, trigger]);
+}