fix bad sizing

src/components/popout/FloatingCard.tsx

@@ -3,7 +3,7 @@ import { FloatingCardMobilePosition } from "@/components/popout/positions/Floati
 import { useIsMobile } from "@/hooks/useIsMobile";
 import { PopoutSection } from "@/video/components/popouts/PopoutUtils";
 import { useSpringValue, animated, easings } from "@react-spring/web";
-import { ReactNode, useCallback, useEffect, useRef } from "react";
+import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { Icon, Icons } from "../Icon";
 import { FloatingDragHandle, MobilePopoutSpacer } from "./FloatingDragHandle";
 
@@ -26,27 +26,33 @@ function CardBase(props: { children: ReactNode }) {
   const width = useSpringValue(0, {
     config: { easing: easings.easeInOutSine, duration: 300 },
   });
+  const [pages, setPages] = useState<NodeListOf<Element> | null>(null);
 
-  const getNewHeight = useCallback(() => {
+  const getNewHeight = useCallback(
-    if (!ref.current) return;
+    (updateList = true) => {
-    const children = ref.current.querySelectorAll(
+      if (!ref.current) return;
-      ":scope *[data-floating-page='true']"
+      const children = ref.current.querySelectorAll(
-    );
+        ":scope *[data-floating-page='true']"
-    if (children.length === 0) {
+      );
-      height.start(0);
+      if (updateList) setPages(children);
-      width.start(0);
+      if (children.length === 0) {
-      return;
+        height.start(0);
-    }
+        width.start(0);
-    const lastChild = children[children.length - 1];
+        return;
-    const rect = lastChild.getBoundingClientRect();
+      }
-    if (height.get() === 0) {
+      const lastChild = children[children.length - 1];
-      height.set(rect.height);
+      const rect = lastChild.getBoundingClientRect();
-      width.set(rect.width);
+      const rectHeight = lastChild.scrollHeight;
-    } else {
+      if (height.get() === 0) {
-      height.start(rect.height);
+        height.set(rectHeight);
-      width.start(rect.width);
+        width.set(rect.width);
-    }
+      } else {
-  }, [height, width]);
+        height.start(rectHeight);
+        width.start(rect.width);
+      }
+    },
+    [height, width]
+  );
 
   useEffect(() => {
     if (!ref.current) return;
@@ -65,22 +71,14 @@ function CardBase(props: { children: ReactNode }) {
   }, [getNewHeight]);
 
   useEffect(() => {
-    if (!ref.current) return;
-    const children = ref.current.querySelectorAll(
-      ":scope *[data-floating-page='true']"
-    );
     const observer = new ResizeObserver(() => {
-      getNewHeight();
+      getNewHeight(false);
-    });
-    observer.observe(ref.current, {
-      attributes: false,
-      childList: true,
-      subtree: false,
     });
+    pages?.forEach((el) => observer.observe(el));
     return () => {
       observer.disconnect();
     };
-  }, [getNewHeight]);
+  }, [pages, getNewHeight]);
 
   return (
     <animated.div

src/components/popout/FloatingDragHandle.tsx

@@ -6,7 +6,7 @@ export function FloatingDragHandle() {
   if (!isMobile) return null;
 
   return (
-    <div className="mx-auto my-2 mb-2 h-1 w-12 rounded-full bg-ash-500 bg-opacity-30" />
+    <div className="mx-auto my-3 -mb-3 h-1 w-12 rounded-full bg-ash-500 bg-opacity-30" />
   );
 }