feat: limit vertical scroll to a reasonable boundary

packages/web/src/components/EditorNew/useScrollBoundaries.js

@@ -1,13 +1,33 @@
-import { useEffect } from 'react';
-import { useViewport, useReactFlow } from 'reactflow';
+import { useEffect, useState } from 'react';
+import { useViewport, useReactFlow, useNodes } from 'reactflow';
 
-export const useScrollBoundaries = () => {
+const scrollYMargin = 100;
+
+export const useScrollBoundaries = (containerHeight) => {
   const { setViewport } = useReactFlow();
   const { x, y, zoom } = useViewport();
+  const nodes = useNodes();
+  const [maxYScroll, setMaxYScroll] = useState(null);
 
-  useEffect(() => {
-    if (y > 0) {
-      setViewport({ x, y: 0, zoom });
-    }
-  }, [y]);
+  useEffect(
+    function updateViewportPosition() {
+      if (y > 0) {
+        setViewport({ x, y: 0, zoom });
+      } else if (typeof maxYScroll === 'number' && y < maxYScroll) {
+        setViewport({ x, y: maxYScroll, zoom });
+      }
+    },
+    [y, maxYScroll],
+  );
+
+  useEffect(
+    function updateMaxYScroll() {
+      if (nodes?.length && containerHeight) {
+        const maxY =
+          containerHeight - nodes[nodes.length - 1].y - scrollYMargin;
+        setMaxYScroll(maxY >= 0 ? 0 : maxY);
+      }
+    },
+    [nodes, containerHeight],
+  );
 };