Hi everyone,

I'm working on a campaign management system that uses React Flow with a drag-and-drop interface. Each node has its own configuration drawer that can be opened and closed.
Most nodes in my system have fixed dimensions, but there's a special Loop Node that can contain nested subflows. As sub-nodes are added, the Loop Node resizes dynamically (its height and width increase accordingly).

🐛 Problem
The issue appears when I:

Add nested nodes inside a Loop Node (causing it to resize).

Open and then close its configuration drawer.

After this interaction, the reactflow__renderer div seems to lose its alignment with the parent container (which has position: relative). It starts rendering from the top of the page or in an offset position, regardless of its parent's layout.

Here’s the expected (correct) behavior:

And here’s what happens after opening and closing the drawer:

Here is the attached video of how it happens,
ReactFlow_Renderer Issue

🔁 Further Behavior
When I open additional drawers for similar nodes, the top position keeps moving further upwards, leaving white space behind. The React Flow background shifts with it.

This leads to:

• Misalignment of the flow graph.
• Unintended scrolling behavior.

🔧 Notes

The renderer works fine until the drawer toggle interaction happens.
I haven’t been able to isolate the root cause yet—it seems related to React Flow’s internal handling of layout/rendering updates.

💡 Questions
Has anyone run into a similar issue when dealing with dynamically resizing nodes?

Is this a known behavior or potentially a bug?
Any tips for re-syncing or forcing the renderer to recalculate layout after drawer toggle?

Thanks in advance!