work on team enrollment

src/components/swipeable-tabs.tsx

@@ -86,7 +86,7 @@ function SwipeableTabs({
     }
   }, [search?.tab]);
 
-  useEffect(() => {
+  const updateHeight = useCallback(() => {
     const activeSlideRef = slideRefs.current[activeTab];
     if (activeSlideRef) {
       const height = activeSlideRef.scrollHeight;
@@ -94,6 +94,32 @@ function SwipeableTabs({
     }
   }, [activeTab]);
 
+  useEffect(() => {
+    updateHeight();
+  }, [activeTab, updateHeight]);
+
+  // Update height when content changes (after render)
+  useEffect(() => {
+    const timeoutId = setTimeout(updateHeight, 0);
+    return () => clearTimeout(timeoutId);
+  });
+
+  // Use ResizeObserver to watch for content size changes
+  useEffect(() => {
+    const activeSlideRef = slideRefs.current[activeTab];
+    if (!activeSlideRef) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      updateHeight();
+    });
+
+    resizeObserver.observe(activeSlideRef);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [activeTab, updateHeight]);
+
   const setControlRef = useCallback(
     (index: number) => (node: HTMLSpanElement | null) => {
       controlsRefs.current[index] = node;