Fix scrolling to center if the element is on the low end of the thingy

src/video/components/popouts/PopoutUtils.tsx

@@ -13,10 +13,17 @@ interface PopoutListEntryTypes {
   errored?: boolean;
 }
 
-export function PopoutSection(props: {
+interface ScrollToActiveProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface PopoutSectionProps {
   children?: React.ReactNode;
   className?: string;
-}) {
+}
+
+export function ScrollToActive(props: ScrollToActiveProps) {
   const ref = createRef<HTMLDivElement>();
   const inited = useRef<boolean>(false);
 
@@ -43,10 +50,14 @@ export function PopoutSection(props: {
         inline: "nearest",
       });
 
-      const activeYPositionCentered =
+      let activeYPositionCentered = 0;
-        active.getBoundingClientRect().top -
+      const setActiveYPositionCentered = () => {
-        wrapper.getBoundingClientRect().top +
+        activeYPositionCentered =
-        active.offsetHeight / 2;
+          active.getBoundingClientRect().top -
+          wrapper.getBoundingClientRect().top +
+          active.offsetHeight / 2;
+      };
+      setActiveYPositionCentered();
 
       if (activeYPositionCentered >= wrapper.offsetHeight / 2) {
         // Check if the active element is below the vertical center line, then scroll it into center
@@ -54,17 +65,33 @@ export function PopoutSection(props: {
           top: activeYPositionCentered - wrapper.offsetHeight / 2,
         });
       }
+
+      setActiveYPositionCentered();
+      if (activeYPositionCentered > wrapper.offsetHeight / 2) {
+        // If the element is over the vertical center line, scroll to the end
+        wrapper.scrollTo({
+          top: wrapper.scrollHeight,
+        });
+      }
     }
     inited.current = true;
   }, [ref]);
 
   return (
-    <div className={["p-5", props.className || ""].join(" ")} ref={ref}>
+    <div className={props.className} ref={ref}>
       {props.children}
     </div>
   );
 }
 
+export function PopoutSection(props: PopoutSectionProps) {
+  return (
+    <ScrollToActive className={["p-5", props.className || ""].join(" ")}>
+      {props.children}
+    </ScrollToActive>
+  );
+}
+
 export function PopoutListEntry(props: PopoutListEntryTypes) {
   const bg = props.isOnDarkBackground ? "bg-ash-200" : "bg-ash-400";
   const hover = props.isOnDarkBackground