docs: update node internals on resize

docs/components/home/flows/Intro.vue

@@ -54,7 +54,8 @@ const initialEdges = [
     style: { strokeWidth: 4, stroke: '#0ea5e9' },
   },
 ]
-const { dimensions, onNodeClick, getNodes, fitView, getNode, getEdge, updateEdge, edges, setEdges } = useVueFlow({
+const { dimensions, onNodeClick, getNodes, fitView, getNode, getEdge, updateEdge, edges, setEdges, updateNodeInternals } =
+  useVueFlow({
     nodes: [
       { id: 'intro', type: 'box', position: { x: 0, y: 0 } },
       { id: 'examples', type: 'box', position: { x: -50, y: 400 } },
@@ -121,6 +122,7 @@ const el = templateRef<HTMLDivElement>('el', null)
 const setNodes = () => {
   if (breakpoints.isSmaller('md')) {
     const mainNode = getNode.value('intro')!
+
     getNodes.value.forEach((node) => {
       switch (node.id) {
         case 'intro':
@@ -201,6 +203,8 @@ const setNodes = () => {
     setEdges(initialEdges)
   }
 
+  updateNodeInternals(getNodes.value.map((n) => n.id))
+
   nextTick(() => {
     fitView()
   })

docs/src/assets/index.css

@@ -10,6 +10,9 @@
   backdrop-filter: blur(1px);
 }
 
+.VPPage {
+  @apply px-8 py-6 md:px-12 lg:px-24;
+}
 
 html, body {
   @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;