Invalid InlineDialog placement based on example from documentation


I wanted to test Forge to start using it at my company. I tried the example which invokes the ContextMenu after a text is highlighted and then after choosing a proper option it displays an InlineDialog alongside documentation with the same text inside. The problem I have is that when I select the first word in my first paragraph on the page the InlineDialog is moved to the top left corner. This also happens when I display the InlineDialog in the middle of the confluence page but after I highlight the first word at the beginning of the line/paragraph.

This behavior is very strange and looks like a bug, especially that I am not modifying any CSS elements and I am just using the code from the example.

I can provide screenshots but I am a new user and I am blocked to paste it here for now.

The only topic I found online and on the Atlassian Developer Community is this one Why does my Atlaskit inline dialog goes to top left corner of my screen? but it relates to atlaskit and not Forge Custom UI so I suppose it’s not the solution.

I am happy to use a workaround for this if there exists one but possibly this issue occurs for other users as well.
I am also getting a slightly different behavior on Firefox and Chromium, sometimes the first time the dialog is displayed correctly but on the second click it moves.
The behavior is also sometimes different if I double click on the word (autoselect) and if I select the text by clicking and dragging the mouse over the whole text.

Any help would be appreciated here.